实现CSS3不透明度完整代码-css教程-PHP中文网

实现CSS3不透明度完整代码

高洛峰

发布： 2017-03-20 10:45:28

原创

2893人浏览过

如何设置透明度？定义opacity属性，通过设置该属性能够使任何元素呈现出半透明效果，opacity属性的基本语法如下：

|inherit

取值说明：

1、|是由浮点数和单位标识符组成的长度值。不可为负值，默认值为1.opacity取值为1时，则元素为完全不透明的；反之，取值为0时，元素是完全透明的，不可见。

2、inherit表示继承，即继承父元素的不透明性。

立即学习“前端免费学习笔记（深入）”；

3、针对IE浏览器，可以使用它的私有属性filter来兼容：filter：alpha（alpha=value）；。

实例：设计灯箱广告背景布

LOVESTUdio多校园网络店铺

主要更新介绍：完美整合Discuz!论坛，实现一站式登陆、退出、注册；同步所有会员资料；新增购物车功能，商品购买更加方便、快捷；新增部分快捷菜单，网站访问更加方便；限制首页商品、店铺标题显示长度；修正会员后台管理不能更改密码的错误；完善商品显示页面所有功能链接；修正后台标签管理部分错误；修正前台学校列表不按后台顺序显示的错误；修正搜索功能中学校名称过长导致显示紊乱的现象；修正

查看详情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>opacity</title>  
<style type="text/css">  
body {   
    margin:0;   
    padding:0;   
}   
p { position:absolute; }   
.bg {   
    width:100%;   
    height:100%;   
    background:#000;   
    opacity:0.7;   
    filter:alpha(opacity=70);   
}   
.lightbox {   
    left:50px;   
    top:50px;   
}   
</style>  
</head>  
  
<body>  
<p class="web"><img  src="images/web_bg_9.jpg"    style="max-width:90%"  style="max-width:90%" / alt="实现CSS3不透明度完整代码" ></p>  
<p class="bg"></p>  
<p class="lightbox"><img  src="images/web_bg_10.png"    style="max-width:90%" / alt="实现CSS3不透明度完整代码" ></p>  
</body>

登录后复制

演示效果图：