RGBA 非常有趣，-webkit-gradient, -moz-gradient, 和 uh... progid:DXImageTransform.Microsoft.gradient... 是的。:)
有没有办法将两者结合起来，RGBA 和渐变，以便使用当前/最新的 CSS 规范来实现 alpha 透明度的渐变。
问问题
409278 次
7 回答
329
是的。您可以在 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)
);
(源)
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);
(源)
显然，您甚至可以在 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
);
(源)
于 2010-02-19T03:46:28.563 回答
106
所有现代浏览器（从 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));
这会呈现一个渐变，从顶部的纯黑色开始，到底部的完全透明。
于 2013-01-30T17:03:59.377 回答
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
);
}
于 2010-09-10T08:05:43.910 回答
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 */
于 2013-05-06T14:18:24.550 回答
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
希望能帮助到你。
于 2014-04-13T10:29:36.093 回答
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 */
于 2019-06-04T15:50:40.850 回答
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
于 2014-12-20T21:41:24.203 回答