CSS 背景图像淡化为白色

Question

我试图在不使内容褪色的情况下从白色淡入背景图像。

这是我的：

.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, 255, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

<div class="my-container">
  <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>

Answer 1

使用伪元素的问题在于您试图将其插入文本和背景之间。

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

.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, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url('http://placekitten.com/1500/1000');
}

<div class="my-container">
  <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>

CSS 背景图像淡化为白色

CSS background image fade to white

html

css

css-gradients