CSS 透明
-
CSS不透明度/透明度
opacity属性指定元素的不透明度/透明度。
opacity属性可以取0.0 - 1.0的值。值越低,越透明:
有五种不同的值:
尝试一下img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }
注意: IE8及早期使用filter:alpha(opacity=x)。x可以取0到100之间的值。较低的值使元素更透明。
-
透明的悬停效果
opacity属性通常与:hover选择器一起使用以更改鼠标悬停时的不透明度:
尝试一下img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ }
示例解释:
第一个CSS块类似于示例1中的代码。此外,我们添加了当用户将鼠标悬停在其中一个图像上时应该发生的事情。在这种情况下,我们希望图像在用户悬停在图像上时不透明。这个的CSS是opacity:1;。当鼠标指针离开图像时,图像将再次透明。反转悬停效果的一个例子:
尝试一下img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }
-
透明盒子
使用opacity属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可以使完全透明元素内的文本难以阅读:
尝试一下div { background-color: #4CAF50; padding: 10px; } div.first { opacity: 0.1; filter: alpha(opacity=10); /* For IE8 and earlier */ } div.second { opacity: 0.3; filter: alpha(opacity=30); /* For IE8 and earlier */ } div.third { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ }
-
使用RGBA的透明度
如果您不想对子元素应用不透明度,例如上面的示例,请使用RGBA颜色值。以下示例设置背景颜色的不透明度,而不是文本:
尝试一下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); }
您从我们的CSS颜色章节中了解到,您可以使用RGB作为颜色值。除了RGB之外,您还可以使用带有Alpha通道(RGBA)的RGB颜色值 - 它指定颜色的不透明度。RGBA颜色值指定为:rgba(红色,绿色,蓝色,alpha)。的 alpha参数之间是0.0(完全透明)和1.0(完全不透明)的数。
提示:您将在CSS颜色章节中了解有关RGBA颜色的更多信息。 -
透明框中的文本
尝试一下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; filter: alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p { margin: 5%; font-weight: bold; color: #000000; }
首先,我们创建一个带有背景图像和边框的<div>元素(class=“background”)。然后我们在第一个<div>中创建另一个<div>(class=“transbox”)。<div class=“transbox”>具有背景颜色和边框 - div是透明的。在透明的<div>中,我们在<p>元素中添加了一些文本。
-
相关页面
HTML教程:HTML样式