CSS3透明度+渐变
RGBA是非常有趣的，所以是-webkit-gradient ， -moz-gradient和呃… progid:DXImageTransform.Microsoft.gradient …是的。 🙂
有没有办法将RGBA和渐变这两者结合起来，以便使用当前/最新的CSS规范来实现alpha透明度的渐变。
是。 您可以在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中使用一个奇怪的“扩展hex”语法来做到这一点。 第一对（在例子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 ）
所有现代浏览器都支持新的语法 （从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上的文档 。
这是一些非常酷的东西！ 我需要几乎相同，但从白色到透明的水平渐变。 它工作得很好！ 这里是我的代码：
.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 ); }
这是我的代码：
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 */
#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
希望它有帮助。
我刚刚遇到了这个更近的例子。 为了简化和使用最近的例子，给css一个“grad”的select器类（我包含向后兼容性）
.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
