html - 使用 CSS3 的背景图像底部渐变

Question

我需要在背景图像的底部使用这种类型的渐变

我想不通 – 如何使用 CSS 制作这种类型的渐变。我已经在 jsFiddle 中上传了我的代码.

.single-blog-bg {
  background-size: cover;
  background-attachment: fixed;
  height: 350px;
  position: relative;
}

.single-blog-bg:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 300px;
  bottom: 0;
  background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%);
  opacity: .5;
}

<div class="single-blog-bg" style="background-image: url(/image/VT8SR.jpg)"></div>

此处显示白色 渐变，但与我预期的不同。

有没有人可以帮助我获得准确的 CSS 代码？

Answer 1

将此样式添加到图像:

mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));