CSS opacity 属性 详解
css3基础 2022-07-14 16:30:33小码哥的IT人生shichen
CSS opacity 属性
实例
设置 div 元素的不透明级别：
div
{
opacity:0.5;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您可以在本页底部找到更多实例。
CSS 语法
opacity: value|inherit;
属性值
| 值 | 描述 | 测试 |
|---|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 | 测试 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
技术细节
| 默认值： | 1 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.opacity=0.5 |
更多实例
完整实例【改变元素的不透明度】：
<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
{el.style.opacity=opacity;}
else
{alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>
<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
<select onchange="ChangeOpacity(this);" size="5">
<option />0
<option />0.2
<option />0.5
<option />0.8
<option selected="selected" />1
</select>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何使用 JavaScript 来改变元素的不透明度。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
完整实例1：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
border:1px solid black;
background-color:lightblue;
width:200px;
height:100px;
position:relative;
left:50px;
padding:5px
}
#DIV2
{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;
position:relative;
top:80px;
left:20px;
padding:5px
}
div#MyDIV
{
opacity:0.9;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>opacity:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="0.9" checked="checked" />0.9</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="0.8" />0.8</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="0.7" />0.7</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="0.6" />0.6</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="0.5" />0.5</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="0.4" />0.4</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="0.3" />0.3</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="0.2" />0.2</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="0.1" />0.1</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="1" />1</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="DIV2"><br/><br/><br/>一个黄色的 DIV 元素。</div>
<div id="MyDIV"><br/><br/><br/>改变 MyDIV 的不透明度。</div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
opacity:<span id="CodeValue">0.9</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.opacity=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
