如何在CSS中的无缝背景图像上执行不透明度等效的线性渐变 [英] How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS

问题描述

我想基本上在CSS中做到这一点:

I want to do this essentially in 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>

但是我想代替颜色，而是渐变渐进渐出背景图像，如下所示:

But instead of a color, I want to gradient-fade-in-and-out a background image, like this:

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

如何在CSS中完成此操作，或者在JS中无法完成此操作.

How to accomplish this in CSS, or if it's not possible in CSS, in JS.

我的图像是无缝的纹理，因此可能会因为重复而将其计入方程式.我还想将background-size设置为不同的大小以弄清楚，所以如果您也可以指定它的话，那会很好.

My image is a seamless texture, so maybe that might factor into the equation since it is repeated. I also want to set the background-size to different sizes to figure it out, so if you could specify that too that would be nice.

推荐答案

您可以考虑

You can consider mask to do this. You can specify the same properties as background thus you can easily define your gradient.

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

或者您可以使用多个背景进行模拟.您将没有透明度，但会得到更好的支持:

Or you can simulate this using multiple background. You will not have transparency but you will have better support:

.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中的无缝背景图像上执行不透明度等效的线性渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！