CSS3透明度+渐变

CSS

斯丁前端

2020-03-23

RGBA是非常有趣的,所以是-webkit-gradient-moz-gradient和呃... progid:DXImageTransform.Microsoft.gradient...是啊。:)

有没有一种方法可以将RGBA和渐变这两者结合起来,以便使用当前/最新的CSS规范可以实现alpha透明度的渐变。

第3072篇《CSS3透明度+渐变》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
Jim小哥GO 2020.03.23

是。您可以在webkit和moz梯度声明中使用rgba:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

src

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

src

显然,您甚至可以使用奇怪的“扩展十六进制”语法在IE中执行此操作。第一组(在示例55中)指的是不透明度级别:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

src

Green神乐 2020.03.23
#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

我在w3schools中发现了这一点,并且在我寻找渐变和透明度时适合我的需求。我提供了指向w3schools的链接。希望这对任何想要渐变和透明的人有所帮助。

http://www.w3schools.com/css/css3_gradients.asp

我也在w3schools中尝试过更改粘贴链接的不透明度检查它

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

希望能帮助到你。

Davaid神乐 2020.03.23

这是一些非常酷的东西!我几乎需要相同的东西,但是需要从白色到透明的水平渐变。而且工作正常!这是我的代码:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }
Gil伽罗小宇宙 2020.03.23

所有现代浏览器(从Chrome 26,Opera 12.1,IE 10和Firefox 16开始)都已经支持新语法一段时间:http : //caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

这将呈现一个渐变,从顶部的纯黑色开始到底部的完全透明。

有关MDN的文档

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android