淡出div背景会影响位于背景图上的其他div。
淡出div背景会影响位于背景图上的其他div。
我有一个填充整个屏幕的背景图片的主要div。我希望这张图片能够不断变化，这个功能已经正常工作。但是我遇到的问题是位于背景div上方的div也被淡出了，所以整个页面变成了空白。请问如何只淡出背景而保留其他内容在屏幕上呢？非常感谢对此问题的任何建议！\n
无最低合同，一切在线支付 如何使用
\n
#hpbg-image {
position: relative;
height: 100%;
width: 100%;
background: url(images/image1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#menu {
padding-top:20px;
padding-right:170px;
position: absolute;
right:0;
color: #ffffff;
font-family: 'Verdana',serif;
}
#login {
padding-top:8px;
padding-right:50px;
position: absolute;
right:0;
}
#holder1 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
width:838px;
}
#searchbox {
height:78px;
width:458px;
background: url(images/searchbg.png);
background-repeat: no-repeat;
padding-top: 22px;
padding-bottom: 18px;
padding-left:40px;
text-align: center;
margin: 0 auto;
}
\n
$(document).ready(function() {
var images = [];
images[0] = "images/image1.jpg";
images[1] = "images/image2.jpg";
images[2] = "images/image3.jpg";
var i = 0;
setInterval(fadeDivs, 2000);
function fadeDivs() {
//5秒后从id = 0开始
$('#hpbg-image').css("background-image", "url("+images[i]+")").fadeOut(500, function() {
$(this).css("background-image", "url("+images[i]+")").fadeIn(500);
});
i++;
if (i == 3)
i = 0; //从头开始重复
}
});
问题的出现原因是：当一个div的背景图像渐变消失时，它会影响到位于背景图像之上的其他div。
解决方法如下：
在CSS中添加以下代码：
#hpbg-image {
...
transition: background 1s linear;// 将此行代码添加到您的CSS中。
...
}
在JavaScript中添加以下代码：
function fadeDivs() {
// 5秒后从id=0开始
$('#hpbg-image').css("background-image", "url("+images[i]+")");
i++;
if (i==3) i=0; // 从头开始重复
}
您可以在这里查看结果。
问题的原因是在CSS中设置了一个div的背景渐变效果，并且该div上面还有其他的div元素。然而，当设置了背景渐变效果的div的不透明度逐渐减小时，它的背景颜色也会逐渐变淡，从而影响到其他位于其上方的div元素。
解决方法是使用CSS的':before'伪元素。通过在设置背景渐变效果的div上添加一个':before'伪元素，我们可以单独控制该伪元素的背景颜色和不透明度，而不会影响到其他div元素。具体代码如下：
.container {
position: relative;
width: 100%;
height: 100%;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('your-image.jpg');
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这样，我们可以单独控制':before'伪元素的背景颜色和不透明度，而不会影响到其他div元素。同时，我们还可以通过调整':before'伪元素的z-index属性来确保其位于其他div元素的下方，从而实现背景渐变效果的div不会遮挡其他内容。
希望这个解决方法对你有所帮助！
