CSS3不全透明度案例解读

日期：2021-01-20 类型：科技新闻我要分享

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

怎样设定全透明度？界定opacity特性，根据设定该特性可以使任何元素展现出半全透明实际效果，opacity特性的基础英语的语法以下：

<alphavalue>|inherit

赋值表明：

1、<alphavalue>|是由浮点数和企业标志符构成的长度值。不能为负值，默认设置值为1.opacity赋值为1时，则元素为彻底不全透明的；反之，赋值为0时，元素是彻底全透明的，不能见。

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

3、对于IE访问器，可使用它的独享特性filter来适配：filter：alpha（alpha=value）；。

案例：设计方案灯箱广告宣传情况布

XML/HTML Code拷贝內容到剪贴板

<!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⑻" />
<title>opacity</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
div { position:absolute; }
.bg {
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity=70);
}
.lightbox {
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>
<div class="bg"></div>
<div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>
</body>

演试实际效果图：

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助。