我需要制作一个带有淡入淡出过渡到黑色的旋转木马,或者更好的是像 #2B303A
这样的深灰色。我在网上发现这段代码运行良好,唯一的问题是淡入淡出效果是一种非常明亮的白色,我不喜欢它,而且它很烦人。
如何让它在图像之间淡化为黑色?
$(document).ready(function() {
//Carousel
var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
var len = vet_url.length;
var i = 0;
function swapBackgrounds() {
$("#background").animate({
opacity: 0
}, 700, function() {
$($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
opacity: 1
}, 700);
});
i++;
}
setInterval(swapBackgrounds, 10000);
});
#background {
background-color: #2B303A;
position: absolute;
z-index: 1;
min-height: 100%;
min-width: 100%;
background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
最佳答案
您需要在 html 元素上执行此操作,至少在您的测试用例中。
html
{
background-color:#2B303A;
}
关于javascript - 带有淡入淡出到黑色过渡的图像轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52843129/