4

我正在尝试从白色淡入背景图像而不淡化内容。

这就是我所拥有的：

.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>

4

1 回答 1

10

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

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

.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>

于 2017-12-29T07:04:30.990 回答