前端必知必会-CSS不透明度opacity/transparency

编程岁月

于 2024-08-23 09:00:00 发布

阅读量472

点赞数 11

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_24018193/article/details/141277834

版权

文章目录

CSS 不透明度/透明度opacity
总结

CSS 不透明度/透明度opacity

不透明度属性opacity指定元素的不透明度/透明度。
不透明度opacity属性可以取 0.0 - 1.0 之间的值。值越低，透明度越高：
在这里插入图片描述

示例

img {
opacity：0.5;
}

透明悬停效果

不透明度属性通常与 :hover 选择器一起使用，以更改鼠标悬停时的不透明度：

北极光山脉意大利

示例

img {
opacity：0.5;
}

img：hover {
opacity：1.0;
}

示例说明
第一个 CSS 块与示例 1 中的代码类似。此外，我们还添加了当用户将鼠标悬停在其中一张图片上时应该发生的情况。在这种情况下，我们希望当用户将鼠标悬停在图片上时，图片不透明。此 CSS 为 opacity:1;。当鼠标指针移开图片时，图片将再次透明。

反向悬停效果的示例：

Northern LightsMountainsItaly

示例

img:hover {
opacity: 0.5;
}

透明框

当使用 opacity 属性为元素的背景添加透明度时，其所有子元素都会继承相同的透明度。这会使完全透明元素内的文本难以阅读：

在这里插入图片描述

示例

div {
opacity: 0.3;
}

使用 RGBA 实现透明度

如果您不想将不透明度应用于子元素（如上例所示），请使用 RGBA 颜色值。以下示例设置背景颜色的不透明度，而不是文本的不透明度：

在这里插入图片描述

可以使用 RGB 作为颜色值。除了 RGB，您还可以使用带有 alpha 通道 (RGBA) 的 RGB 颜色值 - 它指定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

在这里插入图片描述

示例

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>