css不透明背景色

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

CSS中的不透明背景色指的是背景色不是透明的效果,即我们可以设置一个不透明的背景色作为某个元素的背景。 background-color: #000000; //设置背景色为黑色 opacity: 1

CSS中的不透明背景色指的是背景色不是透明的效果,即我们可以设置一个不透明的背景色作为某个元素的背景。

 background-color: #000000; //设置背景色为黑色
    opacity: 1; //设置不透明效果 

通过设置opacity的值为1,就可以让元素的背景色不再透明了。这个属性的取值范围是0到1,其中0代表完全透明,1代表完全不透明。

需要注意的是,opacity不仅仅会影响元素的背景色,还会同时影响元素内部所有的内容的透明度,包括文字、图片等等。

如果我们想要只设置元素背景色不透明,而不影响内部内容的透明度,可以使用rgba颜色值来实现。

 background-color: rgba(0, 0, 0, 0.5); //设置背景为半透明的黑色 

rgba颜色值中的最后一个参数就是透明度,取值范围也是0到1,可以自由调整。这样,我们就可以实现只设置背景色半透明,而内部内容不受影响的效果。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css不透明背景色

粉丝

0

关注

0

收藏

0

已有0次打赏