CSS背景图像淡出白色

时间:2017-12-29 06:57:48

标签: html css css-gradients

我尝试淡化白色的背景图片而不淡化内容。

这就是我所拥有的:



.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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:8)

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

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

&#13;
&#13;
.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');
}
&#13;
<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>
&#13;
&#13;
&#13;