不透明度是元素的属性, 它描述元素的透明度。
图像不透明度：图像中的不透明度属性用于描述图像的透明度。不透明度的值介于0.0到1.0之间, 其中低值代表高透明度, 高值代表低透明度。不透明度的百分比计算为不透明度％=不透明度* 100
例子：
<!DOCTYPE html>
< html >
< head >
< title >Opacity property</ title >
< style >
.forest {
opacity: 0.5;
}
p {
font-size:25px;
font-weight:bold;
margin-bottom:5px;
}
.opacity {
text-align:center;
}
</ style >
</ head >
< body >
< div class = "opacity" >
< p >Image with 100% opacity (original image)</ p >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-10.png"
class = "forest1" >
< br >< br >
< p >Image with 50% opacity</ p >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-10.png"
class = "forest" >
</ div >
</ body >
</ html >输出如下：
图像悬停不透明度：
当鼠标移到图像上时, 悬停不透明度属性会应用到图像上, 否则不透明度属性会更改。
不透明度的值可以很容易地通过将不透明度设置为较高的值, 然后将鼠标悬停在其上时将其降低来降低过程, 例如：
.hightolow {
opacity: 1.0;
}
.hightolow:hover {
opacity: 0.5;
}例子：
<!DOCTYPE html>
< html >
< head >
< title >Image Hover Opacity</ title >
< style >
.gfg_opacity {
opacity: 0.5;
}
.gfg_opacity:hover {
opacity: 1.0;
}
.main {
text-align:center;
}
</ style >
</ head >
< body >
< div class = "main" >
< h1 >Image Hover Opacity:</ h1 >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-10.png"
class = "gfg_opacity" >< br >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-10.png"
class = "gfg_opacity" >< br >< br >
</ div >
</ body >
</ html >输出如下：
使用RGBA值的透明度框和透明度：在透明度框中, 子属性从父属性继承该属性, 但是在使用RGBA进行透明度的情况下, 仅使用或应用不透明度属性为元素的背景添加透明度。
例子：
<!DOCTYPE html>
< html >
< head >
< title >Transparent box</ title >
< style >
.geeks {
background: rgb(0, 153, 0);
padding: 15px;
text-align:center;
width:300px;
}
#geek {
padding: 15px;
text-align:center;
width:300px;
}
.rgba1 {
background: rgba(0, 153, 0, 0.1);
}
.rgba2 {
background: rgba(0, 153, 0, 0.5);
}
.rgba3 {
background: rgba(0, 153, 0, 0.8);
}
.rgba4 {
background: rgba(0, 153, 0, 1.0);
}
.g1 {
float:left;
margin-left:50px;
}
.g2 {
margin-top:-40px;
margin-left:50px;
float:left;
}
</ style >
</ head >
< body >
< div class = "g1" >
< p style = "font-size:24px;font-weight:bold;" >Transparent Box</ p >
< div class = "geeks" style = "opacity:0.1;" >< p >10% opacity</ p ></ div >
< div class = "geeks" style = "opacity:0.5;" >< p >50% opacity</ p ></ div >
< div class = "geeks" style = "opacity:0.8;" >< p >80% opacity</ p ></ div >
< div class = "geeks" >< p >100% opacity</ p ></ div ></ div >< br >< br >
< div class = "g2" >
< p style = "font-size:24px;font-weight:bold;" >RGBA color values</ p >
< div class = "rgba1" id = "geek" >< p >10% opacity</ p ></ div >
< div class = "rgba2" id = "geek" >< p >50% opacity</ p ></ div >
< div class = "rgba3" id = "geek" >< p >80% opacity</ p ></ div >
< div class = "rgba4" id = "geek" >< p >100% opacity</ p ></ div ></ div >
</ body >
</ html >
透明框中的文字：opacity属性可用于减少或增加框的不透明度, 并在其中放置文本以进行最糟糕的帖子。
例子：
<!DOCTYPE html>
< html >
< head >
< style >
div.bg {
background: url("
https://media.lsbin.org/wp-content/uploads/lsbin-10.png");
width:550px;
height:300px;
border: 1px solid;
}
div.box {
margin:50px 20px;
text-align:center;
width:500px;
height:150px;
background-color: #000000;
border: 3px solid white;
opacity: 0.7;
}
div.box p {
margin: 5%;
font-family: Arial;
color:#009900;
font-weight: bold;
font-size: 25px;
}
</ style >
</ head >
< body >
< div class = "bg" >
< div class = "box" >
< p >lsbin</ p >
</ div >
</ div >
</ body >
</ html >输出如下：
