如何在 CSS 中的无缝背景图像上使用不透明度等效线性渐变

Question

我想在 CSS 中做这件事：

div {
  background: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0));
  width: 1000px;
  height: 1000px;
}

<div>hello</div>

但不是颜色，我想要渐变淡入淡出背景图像，像这样：

background: linear-gradient(to top, transparent, url(/myimage.png) repeat, transparent);

如何在 CSS 中完成这个，或者如果在 CSS 中不可能，在 JS 中。

我的图像是无缝纹理，所以也许这可能会影响等式，因为它是重复的。我还想将

background-size

设置为不同的大小来弄清楚，所以如果你也可以指定它，那就太好了。

Answer 1

可以考虑

mask

来做这个。您可以指定与背景相同的属性，因此您可以轻松定义渐变。

.box {
  width: 1000px;
  height: 1000px;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/42/10/10);
  -webkit-mask-image:linear-gradient(to top, transparent, #fff, transparent);
  mask-image:linear-gradient(to top, transparent, #fff, transparent);
}

<div class="box">hello</div>

或者你可以使用多个背景来模拟这个。你不会有透明度，但你会得到更好的支持：

.box {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to top,#fff, transparent, #fff),
    url(https://picsum.photos/id/42/10/10);
}

<div class="box">hello</div>

Answer 2

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(your-image-url.jpg);
background-blend-mode: overlay;