重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要为大家展示了“css不透明度opacity属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css不透明度opacity属性的示例分析”这篇文章吧。
创新互联公司是一家专注于网站建设、做网站与策划设计,琼中黎族网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:琼中黎族等地区。琼中黎族做网站价格咨询:13518219792
一、opacity属性
1、opacity
习惯上说“透明度”,其实应该叫“不透明度”。opacity意思:不透明,而背景色的默认值:transparent意思才是“透明的”。所以opacity用来设置不透明度,取值从[0.0~1.0],代表从完全透明到完全不透明,0.0就和transparent一样了,看不到但是实实在在存在。
默认值:1,完全不透明。
Inherited:默认继承。所以给父元素设置opacity时,所有子元素也会继承opacity属性。
div{
background-color:red;
}
.opacity{
opacity:0.5;
}
---------------------------
文本和背景色都受到不透明度级别的影响。
文本和背景色都受到不透明度级别的影响。
效果图:
1.png
所有浏览器都支持opacity属性,IE8及更早的版本支持替代的filter属性。
filter:alpha(opacity=number),中number取值[0~100],0完全透明,100不透明。
所以为兼容可写为:
.opacity{
opacity:0.5;
filter:alpha(opacity=50);
}
2、子元素设置opacity
父元素设置opacity,子元素也设置opacity,在IE下子元素设置的opacity不起作用,在ff和Chrome下,子元素最终的opacity=父元素opacity*子元素opacity。
这样就可以解释为什么父元素设置了不透明度后,子元素设置不透明度为1【即完全不透明】但不生效了。
例子:
div{
background-color:red;
}
.opacity{
opacity:0.5;
}
.sonOpacity{
opacity:0.3;
}
不设置opacity效果
父元素(div)设置opacity:0.5效果
以上是“css不透明度opacity属性的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!