CSS透明属性解说及CSS透明度继承介绍
发布时间：2022-04-20 09:27:08 所属栏目：语言 来源：互联网
导读：我们在制作网页时，透明效果往往达到不错的视觉感受，所以CSS透明属性应用也是很多的。但是我们在使用CSS透明属性时，要注意两个问题，第一是浏览器兼容问题；第二是CSS透明度继承问题。下面我们来具体了解下。 代码如下: .transparent_class { filter:alpha
|
我们在制作网页时，透明效果往往达到不错的视觉感受，所以CSS透明属性应用也是很多的。但是我们在使用CSS透明属性时，要注意两个问题，第一是浏览器兼容问题；第二是CSS透明度继承问题。下面我们来具体了解下。 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1. -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。 -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。 CSS代码 代码如下: body { background-image: url(./105247.png); background-repeat: repeat; } .div2{ width:100px; height:100px; background: url(./testbok.png)} .div3{ width:200px; height:200px; position:relative; margin-top:10px} .div4{ position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;} 如果你外面的容器高度是不定的，那么只要把div3的高度设置的足够的高度就可以了 。但是，这个方法有个很不好的缺点，就是多了一个空白的div 。 以上就是对CSS透明属性的介绍，希望对大家学习和理解CSS透明属性有所帮助，更多CSS内容大家能关注其他文章。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号