|
CSS 不透明度 / 透明度 opacity 属性指定元素的不透明度/透明度。 透明图像opacity 属性的取值范围为 0.0-1.0。值越低，越透明： 实例img { opacity: 0.5;}
透明悬停效果opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时（请看第二幅）更改不透明度： 实例img { opacity: 0.5;} img:hover { opacity: 1.0;}
例子解释第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条CSS 是 opacity:1;。 当鼠标指针离开图像时，图像将再次透明。 反向悬停（请看第一幅）效果的例子： 实例img:hover { opacity: 0.5;}
透明盒使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读： 实例div { opacity: 0.3;}
使用 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% 的绿色背景 */}
透明盒中的文本 实例<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>
例子解释首先，我们创建一个带有背景图像和边框的<div> 元素（class="background"）。 然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）。 <divclass="transbox"> 有背景色和边框- 这个 div 是透明的。 在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。
| 
发表于 2024-1-11 17:22:04
收藏
