CSS 不透明度 / 透明度 详解
CSS 不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。
透明图像
opacity 属性的取值范围为 0.0-1.0。值越低，越透明：
opacity 0.2
opacity 0.5
opacity 1
实例
img { opacity: 0.5; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> img { opacity: 0.5; } </style> </head> <body> <h1>图像透明度</h1> <p>opacity 属性规定元素的透明度。值越低，越透明：</p> <p>50% 不透明度的图像：</p> <img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" height="400"> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
透明悬停效果
opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：
实例
img { opacity: 0.5; } img:hover { opacity: 1.0; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> img { opacity: 0.5; } img:hover { opacity: 1.0; } </style> </head> <body> <h1>图像透明度</h1> <p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p> <img src="/i/photo/tulip.jpg" alt="Tulip" width="170" height="170"> <img src="/i/photo/tulip-2.jpg" alt="Tulip" width="170" height="170"> <img src="/i/photo/flower-4.jpg" alt="Flower" width="170" height="170"> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释
第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。
当鼠标指针离开图像时，图像将再次透明。
反向悬停效果的例子：
实例
img:hover { opacity: 0.5; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> img:hover { opacity: 0.5; } </style> </head> <body> <h1>图像透明度</h1> <p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p> <img src="/i/photo/tulip.jpg" alt="Tulip" width="170" height="170"> <img src="/i/photo/tulip-2.jpg" alt="Tulip" width="170" height="170"> <img src="/i/photo/flower-4.jpg" alt="Flower" width="170" height="170"> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
透明盒
使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：
示例代码：
div { opacity: 0.3; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> div { background-color: #4CAF50; padding: 10px; } div.first { opacity: 0.1; } div.second { opacity: 0.3; } div.third { opacity: 0.6; } </style> </head> <body> <h1>透明框</h1> <p>当使用 opacity 属性为元素背景添加透明度时，其所有子元素也将变为透明。这可能会使完全透明的元素内的文本难以阅读：</p> <div class="first"><p>opacity 0.1</p></div> <div class="second"><p>opacity 0.3</p></div> <div class="third"><p>opacity 0.6</p></div> <div><p>opacity 1 (default)</p></div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
您已经从我们的 CSS 颜色 这一章中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道（RGBA）一起使用 - 该通道规定颜色的不透明度。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
提示：您将在我们的 CSS 颜色 这一章中学到有关 RGBA 颜色的更多知识。
示例代码：
div { background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */ }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> div { background: rgb(76, 175, 80); padding: 10px; } div.first { background: rgba(76, 175, 80, 0.1); } div.second { background: rgba(76, 175, 80, 0.3); } div.third { background: rgba(76, 175, 80, 0.6); } </style> </head> <body> <h1>透明框</h1> <p>使用 opacity：</p> <div style="opacity:0.1;"><p>10% opacity</p></div> <div style="opacity:0.3;"><p>30% opacity</p></div> <div style="opacity:0.6;"><p>60% opacity</p></div> <div><p>opacity 1</p></div> <p>使用 RGBA 颜色值：</p> <div class="first"><p>10% opacity</p></div> <div class="second"><p>30% opacity</p></div> <div class="third"><p>60% opacity</p></div> <div><p>default</p></div> <p>注意使用 opacity 属性时文本以及背景颜色如何变得透明。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
透明盒中的文本
这是一些位于透明框中的文本。
示例代码：
<html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>这是一些位于透明框中的文本。</p> </div> </div> </body> </html>
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> div.background { background: url(/i/photo/tulip_peach_blossom_s.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>这段文本被放置在一个透明框中。</p> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释
首先，我们创建一个带有背景图像和边框的 <div> 元素（class="background"）。
然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）。
<div class="transbox"> 有背景色和边框 - 这个 div 是透明的。
在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。
