css中如何设置透明色

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中设置透明色是一个常用的技巧,可以实现各种特殊的效果。下面通过几个例子来介绍如何设置透明色。/* 设置背景透明 */ background-color: rgba(255, 255, 255,

CSS中设置透明色是一个常用的技巧,可以实现各种特殊的效果。下面通过几个例子来介绍如何设置透明色。

/* 设置背景透明 */
background-color: rgba(255, 255, 255, 0.5);

/* 设置文字透明 */
color: rgba(0, 0, 0, 0.5);

/* 设置边框透明 */
border: 1px solid rgba(255, 255, 255, 0.5);

/* 设置阴影透明 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 

上面的例子中,使用了rgba()函数来表示颜色的透明度。该函数有四个参数,前三个参数分别表示红、绿、蓝三个颜色通道的值,取值范围为0~255,第四个参数表示透明度,取值范围为0~1。

除了使用rgba()函数,还可以使用hsla()函数来表示颜色的透明度。该函数有四个参数,第一个参数表示色相,取值范围为0~360,第二个参数表示饱和度,取值范围为0~100%,第三个参数表示亮度,取值范围为0~100%,第四个参数表示透明度,取值范围为0~1。

/* 使用hsla()函数设置透明色 */
background-color: hsla(0, 100%, 100%, 0.5); 

上面的例子中,将第三个参数设置为100%,表示不改变原来的颜色,使用第四个参数来实现透明效果。

总之,在CSS中设置透明色可以使用rgba()函数或hsla()函数,透明度从0到1表示颜色从完全不透明到完全透明的过渡。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何设置透明色

粉丝

0

关注

0

收藏

0

已有0次打赏