CSS 不透明度/透明度使用代码实例

不透明度是元素的属性, 它描述元素的透明度。
图像不透明度：图像中的不透明度属性用于描述图像的透明度。不透明度的值介于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 >

【CSS 不透明度/透明度使用代码实例】输出如下：