曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 前端开发 > CSS设置网页背景透明

CSS设置网页背景透明

时间:2016-09-21 16:39:49 栏目:前端开发 作者:曲振飞 点击: 451

怎样在CSS样式中设置背景的透明度,下面给出一个具体的实例。把类为box的层设为透明。

<div class="box"></div>
<style>
.box{
    width:300px; 
    height:200px; 
    margin:0 auto; 
    border:1px solid #ccc; 
    background:#000; 
    filter:alpha(opacity:30); 
    opacity:0.3;  
    -moz-opacity:0.3;
    -khtml-opacity: 0.3
}
</style>

其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码,当opacity值为1时,表示完全不透明,为0时表示完全透明。

属性介绍如下:

opacity: 0.3;这是“最重要的”,因为它是CSS的现行标准。这将在Firefox,Safari和Opera的大多数版本中工作。

filter:alpha(opacity=30);这一个是针对IE8及以下浏览器

-moz-opacity:0.3;你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。

-khtml-opacity: 0.3;这是旧版本的Safari(1.×)当渲染引擎是使用仍被称为kthml,而不是目前的WebKit。


还可以通过第二种方法:

background: rgba(0, 0, 0, 0.27);第四个属性为设置透明度,在IE8及一下了浏览器不支持该方法

关键字:

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.