html 透明度渐变效果,CSS3不透明度渐变？

您可以在CSS中执行此操作，但Chrome浏览器，Safari和Opera的浏览器目前还没有太多的支持。 Firefox目前只支持SVG掩码。有关更多信息，请参阅

Caniuse结果。

CSS：

p {

color: red;

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

}

诀窍是指定一个本身就是以不可见(通过α值)结束的渐变的蒙版，

看到一个具有坚实背景的演示，但是您可以将其更改为任何您想要的。

现在，Chrome，Firefox，Safari和Opera都支持另一种方法。

想法是使用

mix-blend-mode: hard-light;

如果颜色为灰色，则会给出透明度。然后，元素上的灰色重叠将创建透明度

div {

background-color: lightblue;

}

p {

color: red;

overflow: hidden;

position: relative;

width: 200px;

mix-blend-mode: hard-light;

}

p:after {

position: absolute;

content: "";

left: 0px;

top: 0px;

height: 100%;

width: 100%;

background: linear-gradient(transparent,gray);

}

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text