CSS3透明度+渐变

Question

CSS3透明度+渐变

cssgradient

291

RGBA非常有趣，而-webkit-gradient、-moz-gradient和progid:DXImageTransform.Microsoft.gradient也很有趣...是的。:)

是否有一种方法可以结合当前/最新的CSS规范使用RGBA和渐变，以便产生alpha透明度渐变。

- Jourkey

1

@geo1701的评论应该成为被采纳的，因为它更符合现代标准。 - Dmytro Shevchenko

7个回答

108

新语法已经被所有现代浏览器支持一段时间了（从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 上的文档.

- George Filippakos

9

从顶部到底部逐渐变为全透明，最上方呈现实心黑色。 - commonpike

我认为这只是一个建议，实际上并不起作用吗？ - bart

背景：线性渐变（从左至右，rgba(0, 0, 0, 1)到rgba(0, 0, 0, 0)）; // 用于左到右渐变背景：线性渐变（从右至左，rgba(0, 0, 0, 1)到rgba(0, 0, 0, 0)）; // 用于右到左渐变 - Viraj Singh

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

- Misha

1

参考微软实现，gradientType=1表示水平，0表示垂直。 - Brooks

IE7和IE8的渐变没有指定任何透明度颜色吗？它们真的会淡化到透明吗？ - 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 */

- Miloš Miljković

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。如果有人正在寻找渐变和透明度，希望这能帮到他们。

同时，我在w3schools尝试改变不透明度，粘贴了链接以供查看。

希望这些内容有所帮助。

链接：http://www.w3schools.com/css/css3_gradients.asp 不透明度链接：http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

- sagar buddhi

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 */

- Riccardo Volpe

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 */
}

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

- davidrynn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Owen · Accepted Answer

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

（注意：保留了HTML格式）

/* 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)

（保留HTML）