CSS中如何制作背景图片半透明但内容不透明的效果
程序员文章站
2024-03-19 18:23:22
...
CSS中如何制作背景半透明但内容不透明的效果
一、利用伪元素：before添加一个半透明的背景，并利用position定位属性，设置z-index值为-1，显示在下层。
css:
<style>
.box:before{
width: 500px;
height: 300px;
border: 1px solid gray;
background:url(../sucai/1.jpg);
background-size: 500px 300px;
/*opacity设置半透明效果*/
opacity: 0.5;
/* content和：before搭配使用 */
content:"";
/* 使用绝对定位，z-index=-1设置为下层显示 */
position: absolute;
z-index: -1;
<style>
html:
<body>
<div class="box">
<p>利用伪元素:before添加一个半透明的背景</p>
</div>
</body>
效果实现：可以看到p标签里面的文字不透明，而背景透明。
————————————————————————————————————————————
二、在外层div里设置背景，内层div利用rgba设置一个半透明的纯色背景，可以实现一样的半透明背景图片的效果。
<style>
.box1{
width: 500px;
height: 300px;
background: url(../sucai/1.jpg);
background-size: 500px 300px;
}
.box2{
width: 500px;
height: 300px;
/* 利用rgba设置一个纯白色半透明背景 */
background: rgba(255, 255, 255, 0.5);
}
</style>
<body>
<div class="box1">
<div class="box2">
<p>外层div设置背景，内层div设置纯色半透明背景。</p>
</div>
</div>
</body>
实现效果：
上一篇： FSM状态机