CSS 不透明度 / 透明度

本文详细介绍了CSS中的透明度使用,包括透明图像、透明悬停效果、透明盒以及如何通过RGBA实现更精确的透明度控制。在透明盒中,由于opacity属性会作用于所有子元素,可能导致文本难以阅读,而RGBA颜色值则可以避免这个问题,只影响背景的透明度而不影响文本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

opacity 属性指定元素的不透明度/透明度。

透明图像

opacity 属性的取值范围为 0.0-1.0。值越低,越透明:

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用,这样就可以在鼠标悬停时更改不透明度:

 

透明盒

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

使用 RGBA 的透明度

如果不希望对子元素应用不透明度,如上面的例子,使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度:

 RGBA 颜色值指定为:rgba(redgreenbluealpha)。 alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字

透明盒中的文本

首先,我们创建一个带有背景图像和边框的 <div> 元素(class="opacity1")。

然后,我们在第一个 <div> 中创建另一个 <div>(class="opacity2")。

<div class="opacity2"> 有背景色和边框 - 这个 div 是透明的。

在透明的 <div> 内,我们在 <p> 元素内添加了一些文本。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值