如何实现背景透明文字不透明
程序员文章站
2024-03-19 18:04:34
...
第一种情况背景为自定义颜色:
直接给父级背景颜色设置background:rgba();就可以了;
<!-- 第一种情况 背景是自定义颜色系列 -->
<div class="container">
<div class="bg">
<div class="form">
<div class="formItem">
<label for="">用户名:</label>
<input class="input" type="text">
</div>
<div class="formItem">
<label for="">密码:</label>
<input class="input" type="text">
</div>
<div class="formItem">
<button class="btn">按钮</button>
</div>
</div>
</div>
</div>
``
```css
/* 第一种情况适用 */
.container {
width: 800px;
height: 500px;
background: url('../img/bg.jpg') no-repeat center;
background-size: cover;
position: relative;
}
.container .bg {
position: absolute;
right: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-right: -100px;
border-radius: 4px;
overflow: hidden;
box-shadow: 10px 10px 5px #888888;
background-color: rgba(0, 229, 238, 0.5);
}
.container .bg .form {
width: 160px;
height: 160px;
color: #FFFFFF;
padding: 20px 20px;
}
.container .bg .form .formItem {
margin: 10px 0;
}
.container .bg .form .formItem .btn {
width: 160px;
height: 20px;
background-color: #0000FF;
margin-top: 40px;
}
.container .bg .form .formItem .input {
width: 160px;
border: 0px;
}
效果:
第二种情况,背景为图片
将背景和表单设置成兄弟块,通过定位将两者重合,再将背景用opacity透明化,表单不添加背景即可;
<!-- 第二种情况 图片作为背景 -->
<div class="container">
<div class="bg2"></div>
<div class="form2">
<div class="formItem">
<label for="">用户名:</label>
<input class="input" type="text">
</div>
<div class="formItem">
<label for="">密码:</label>
<input class="input" type="text">
</div>
<div class="formItem">
<button class="btn">按钮</button>
</div>
</div>
</div>
/* 第二种情况适用 */
.container .bg2 {
position: absolute;
/* right: 50%; */
right: 5%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
/* margin-right: -100px; */
border-radius: 4px;
overflow: hidden;
box-shadow: 10px 10px 5px #888888;
background: url('../img/avator-1.jpg') no-repeat center;
background-size: cover;
opacity: 0.7;
}
.container .form2 {
position: absolute;
/* right: 50%; */
right: 5%;
top: 50%;
width: 160px;
height: 160px;
margin-top: -100px;
/* margin-right: -100px; */
color: #000000;
padding: 20px 20px;
}
.container .form2 .formItem {
margin: 10px 0;
}
.container .form2 .formItem .btn {
width: 160px;
height: 20px;
background-color: #00ff00;
margin-top: 40px;
}
.container .form2 .formItem .input {
width: 160px;
border: 0px;
}
效果:
EXTRA:
opacity:影响内部所有元素的显示问题;
rgba():影响内部文本显示,但不影响内部块显示;