html – CSS背景图片淡出白色

概述我试图从白色淡化背景图像而不淡化内容. 这就是我所拥有的： .my-container { position: relative; background: white; overflow: hidden; background-repeat: no-repeat; width: 100%; height: 100%; background-size: cover; 我试图从白色淡化背景图像而不淡化内容.

这就是我所拥有的：

.my-container {  position: relative;  background: white;  overflow: hIDden;  background-repeat: no-repeat;  wIDth: 100%;  height: 100%;  background-size: cover;  background-image: url('http://placekitten.com/1500/1000');}/* You Could use :after - it doesn't really matter */.my-container:before {  content: ' ';  display: block;  position: absolute;  left: 0;  top: 0;  wIDth: 100%;  height: 100%;  z-index: 1;  opacity: 1;  background-image: linear-gradIEnt(to bottom,rgba(255,255,1),0));  background-repeat: no-repeat;  background-position: 50% 0;  background-size: cover;}

<div >  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1></div>

解决方法 使用伪元素的麻烦在于您尝试将其插入文本和背景之间.

至少在现代浏览器中,解决方案是在容器本身中将多个背景堆叠在一起.

.my-container {  position: relative;  background: white;  overflow: hIDden;  background-repeat: no-repeat;  wIDth: 100%;  height: 100%;  background-size: cover;  background-image: linear-gradIEnt(to bottom,0)),url('http://placekitten.com/1500/1000');}

<div >  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1>  <h1>Scotch Scotch Scotch</h1></div>

总结

以上是内存溢出为你收集整理的html – CSS背景图片淡出白色全部内容，希望文章能够帮你解决html – CSS背景图片淡出白色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。