CSS3透明度+渐变


286

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

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


1
@ geo1701的评论应该成为被接受的评论,因为它与现代标准更加相关。
Dmytro Shevchenko

Answers:


326

是。您可以在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


20
仅供参考,“扩展十六进制”只是32位ARGB而不是24位RGB颜色值。
Macke

2
我也希望这些也可以在标准CSS中使用,但是在末尾加上alpha(似乎更自然):#0001会是“几乎透明的黑色”的短十六进制,并且#ffcc00ff#ffcc00,即“完全不透明的橘黄色”相同
飞羊

56
还可以在Colorzilla上查看CSS3 Gradient Generator,它具有许多不错的预设以及所有与跨浏览器兼容的变体,以实现您所需的渐变
andrhamm

所以,我已经检查了它,可以在所有主要的浏览器上使用,但是不能在Opera上使用,有任何线索吗?
WhoSayIn 2012年

没关系,我才发现它;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
WhoSayIn 2012年

101

所有现代浏览器(从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的文档


7
..在顶部创建纯黑色,在底部完全透明
commonpike 2014年

我认为这是一个建议,实际上不起作用吗?
巴特2015年

15

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

.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
        );
    }

1
供参考,在Microsoft实现中,gradientType = 1为水平,0为垂直。
布鲁克斯,

IE7和IE8渐变没有指定任何Alpha颜色?它们真的褪色成透明的吗?
KajMagnus

3

这是我的代码:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

3
#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

希望能帮助到你。


1

以下是我用于为同一颜色生成从完全不透明(顶部)到透明度(底部)为20%的垂直渐变的一个:

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

0

我刚刚遇到了这个最近的例子。为了简化和使用最新的示例,给css一个'grad'的选择器类,(我已经包括了向后兼容性)

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

来自 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.