Question

我发现无法在我的网站（www.thegreateverything.com）上获取背景图像，以便在向下滚动页面时将其完全淡化为白色。我试图获得与此网站上的背景图片相同的效果：https://www.garyvaynerchuk.com/askgaryvee-episode-173-book-marketing-snapchat-growth-tipping-points-in-history/

我已经查看了其他人的类似问题，但没有一个答案似乎有效。我是编码和使用CSS以及Valenti主题的新手。

如果有人能解决这个问题，我真的很感激。

Answer 1

我相信这是你正在寻找的效果。 contentHolder文章充当渐变图层，这样就可以像你给我们的网站一样产生背景效果。

此外，渐变代码取自Colorzilla梯度生成器。您可能需要这样做，因为根据您的喜好编辑渐变可能需要一段时间。

＆＃13;

body { 
margin: 0px;
background-image: url(https://www.random.org/analysis/randbitmap-rdo.png);
background-repeat: no-repeat;
background-attachment: fixed;
  background-position: center top;
}

#contentHolder {
background: -moz-linear-gradient(top, rgba(255,255,255,0.43) 0%, rgba(255,255,255,0.51) 20%, rgba(255,255,255,0.56) 30%, rgba(255,255,255,0.74) 40%, rgba(255,255,255,0.81) 59%, rgba(255,255,255,0.96) 82%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.43) 0%,rgba(255,255,255,0.51) 20%,rgba(255,255,255,0.56) 30%,rgba(255,255,255,0.74) 40%,rgba(255,255,255,0.81) 59%,rgba(255,255,255,0.96) 82%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0.43) 0%,rgba(255,255,255,0.51) 20%,rgba(255,255,255,0.56) 30%,rgba(255,255,255,0.74) 40%,rgba(255,255,255,0.81) 59%,rgba(255,255,255,0.96) 82%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6effffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
margin-top: 500px;
}

#mainContent {
background: blue;
padding-bottom: 2500px;
margin-left: 100px;
margin-right: 100px;
text-align: center;
}

＆＃13;

<body>
	
	<article id="contentHolder">
		<section id="mainContent">
			<p>Lorem ipsum sit amet</p>
		</section>
	</article>

</body>

＆＃13;

无法在背景图像上叠加渐变？

1 个答案: