/* 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)
);
.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 */
}
6 回答
是 . 您可以在webkit和moz渐变声明中使用rgba:
(src)
(src)
显然,您甚至可以使用奇怪的“扩展十六进制”语法在IE中执行此操作 . 第一对(在示例55中)指的是不透明度:
(src)
所有现代浏览器都支持 New syntax 一段时间(从Chrome 26,Opera 12.1,IE 10和Firefox 16开始):http://caniuse.com/#feat=css-gradients
这会呈现一个渐变,从顶部的纯黑色到底部的完全透明 .
Documentation on MDN .
这是一些非常酷的东西!我需要几乎相同,但水平渐变从白色到透明 . 它工作得很好!这是我的代码:
这是我的代码:
我在w3schools找到了这个,并且在寻找渐变和透明度时适合我的需求 . 我提供了指向w3schools的链接 . 希望这有助于任何人寻找渐变和透明度 .
http://www.w3schools.com/css/css3_gradients.asp
此外,我在w3schools尝试改变不透明度粘贴链接检查它
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans
希望能帮助到你 .
我刚刚看到了这个最近的例子 . 为了简化和使用最新的例子,给css一个选择器类'grad',(我包括向后兼容性)
来自https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient