css背景半透明,文字不透明

透明设置

1.rgba
最直接设置半透明背景的方法。
RGBA是代表red-红色、green-绿色、blue-蓝色 和alpha-透明度四个单词的缩写。RGBA颜色值是RGB颜色值的扩展,带有alpha通道规定了对象的透明度。
例子:
div{ background:rgba(0,0,0,0.5); }

2.opacity
设置元素的透明级别。
会使元素的背景、字体及子节点变得透明。
例子:
div{opacity:0.5;}

3.将子节点作为背景
例子:


.d1{
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
top: 0px;
opacity: 0.3;
pointer-events: none;
background-color: #f00;
}
这种做法比较奇葩,一般不会用到

4.将同级(兄弟)节点作为背景,自己设置为透明覆盖到上面

posted @ 2020-09-18 18:39  乳鸽菌  阅读(243)  评论(0编辑  收藏  举报