如何在 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>

但我想要 gradient-fade-in-and-out 背景图像，而不是 color，如下所示：

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>

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

How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS

css

background-image

linear-gradients