CSS 不透明度/透明度
CSS opacity 属性指定元素的不透明度,取值区间 0.0 - 1.0 之间的值。 英文中 opacity 是不透明的意思,所以最小值 0 表示完全透明,1 则表示完全不透明。
CSS opacity
属性指定元素的不透明度,取值区间 0.0 - 1.0 之间的值。 英文中 opacity
是不透明的意思,所以最小值 0 表示完全透明,1 则表示完全不透明。
opacity
的默认值为 1, 即完全不透明。
半透明图片
img {
opacity: 0.5;
}
半透明悬停效果
opacity
属性通常与 :hover
伪类选择器一起使用以达到鼠标悬停时改变不透明度的效果。
img {
opacity: 0.5;
}
img:hover {
opacity: 1;
}
半透明元素
使用 opacity
属性为元素添加透明度后,所有子元素都继承相同的透明度,这会使完全透明元素内的文本难以阅读。
div {
opacity: 0.3;
}
使用 RGBA 透明背景色
为了避免上述问题,我们可以使用 RGBA 颜色值为元素设置透明背景。
在 CSS 颜色章节中了解到,可以使用带有 Alpha 通道的 RGB 颜色值(RGB**A**)设置颜色的不透明度。
RGBA 颜色值表示方法为: rgba(red, green, blue, alpha)
。 alpha 参数即是不透明度,取值为 0.0(完全透明)和 1.0(完全不透明)之间的数。
div {
background: rgba(0, 128, 0, 0.3); /* 带有 30% 不透明度的绿色 */
}
实例:透明框中的文本
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
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 class="background">
中创建另一个 <div class="transbox">
。
<div class="transbox">
有一个半透明的背景色和一个边框。
在透明的 <div>
中,我们在 <p>
元素中添加一些文本。