html父级透明度,不继承父级透明度和背景颜色渐变【原创】

1.写页面经常会遇到背景颜色会产生由深到浅或者由浅到深的情况，本以为很简单的一个小样式处理下就好，

.preferred-case-box{

background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#0084b5), to(#00c5b9));

}

但是后来猛然发现这串样式导致页面背景仅仅在谷歌浏览器里有效果，其他浏览器都没有 预期的效果，经过多方询问加上自己翻阅资料和搜寻相关知识才懂得不同的浏览器支持不同的样式书写方式，最后总结出了在不同浏览器里背景颜色渐变的代码，如下：

.preferred-case-box{

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0084b5,endColorStr=#00c5b9); /*IE 6 7 8*/

background: -ms-linear-gradient(top, #0084b5,  #00c5b9);/* IE 10 */

background:-moz-linear-gradient(top,#0084b5,#00c5b9);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#0084b5), to(#00c5b9));/*谷歌*/

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0084b5), to(#00c5b9)); /* Safari 4-5, Chrome 1-9*/

background: -webkit-linear-gradient(top, #0084b5, #00c5b9);/*Safari5.1 Chrome 10+*/

background: -o-linear-gradient(top, #0084b5, #00c5b9);/*Opera 1

这样就再也不用担心背景颜色渐变不兼容的问题啦！

2.最近写页面经常遇到有关透明度的问题，包含子集的父级具有透明度效果，连带着子集也有相同的透明度，这是个很头奶痛苦的事，怎么解决呢

son不想继承 dad的透明怎么办？

另外ie6如何透明？

opacity 属性只对应用属性的元素有效，后代元素(包括子元素)不继承，取值在0-1之间(0， 0.1， 0.2， 0.3， 0.4， 0.5， 0.6， 0.7， 0.8， 0.9， 1)，0是完全透明，1是完全不透明。opacity会把所有的元素都变透明，不仅仅是背景颜色。如果仅仅需要背景透明，可以用rgba():

background: raba(x1, x2, x3, y);

x1 x2 x3 取值是0-255之间的整数

y            取值是0-1之间(0， 0.1， 0.2， 0.3， 0.4， 0.5， 0.6， 0.7， 0.8， 0.9， 1)

IE的话可以用滤镜，filter:alpha()

非IE浏览器具体情况可用以下代码试验：

opacity.html    文件代码如下：

opacity.css    文件代码如下：

如果是IE，那就用：

filter:alpha(opacity=50);

代替CSS中的：

opacity=0.5;

filter:alpha(opacity=x1);  x1取值是0-100之间的整数，0是完全透明，100是完全不透明。

为了IE和其它浏览器都能生效，CSS中最好以下两句都加上：

filter:alpha(opacity=50);

opacity=0.5;

关于你说的“son不想继承 dad的透明怎么搬？”：

你如果对一个

适合你的解决办法看来是：只设置背景透明度，用

background: raba(x1, x2, x3, y);

x1 x2 x3 取值是0-255之间的整数

y            取值是0-1之间(0， 0.1， 0.2， 0.3， 0.4， 0.5， 0.6， 0.7， 0.8， 0.9， 1)

2. 再创建新的

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/17839.html

微信打赏

支付宝打赏

感谢您对作者ann的打赏，我们会更加努力！    如果您想成为作者，请点我