Question

我从codepen.io复制this code，为我网站的背景图片添加交叉渐变效果。

＆＃13;

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
	window.clearTimeout();
	var k = 0;
	for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function(){ 
			document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
			document.documentElement.style.backgroundSize ="cover";
		if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }			
		}, (secs * 1000) * i)	
	}
}
backgroundSequence();

＆＃13;

* { 
  box-sizing: border-box; 
}
html {
  margin: 0;
  background-size: cover;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
  background-blend-mode: darken;
  // blend mode optional at this stage; will be used more in the next demo.
  transition: 3s;
}
body { margin: 0; }
div#texttop { 
	color: #fff;
	width: 30%;
	margin-top: 5%;
	margin-left: 5%;
	padding: 2rem;
	border: 4px double rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.3);
	font-family: Oxygen, sans-serif;
h1 { 
  margin-top: 0; 
  text-align: center;
  font-weight: 100;
}
p { 
   line-height: 1.6; 
  }
}
@media all and (max-width: 770px) {
	div#texttop { display: none; }
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="texttop">
		<h1>True Cross-Fade Background Images</h1>
		<p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
	</div>

＆＃13;

图像循环正常，但它们没有进行交叉渐变过渡，它们只是在没有交叉渐变效果的情况下进行更改。偶尔图像循环之间会出现白色闪烁。

我在这里插入了一段代码，但它仍然无法正常工作。或许还有一些我无法找到的东西？

交叉淡化效果不正常

0 个答案: