背景透明，文字不透明的解决方案

时间：2024-03-06 18:22:07

在写项目的时候，会经常遇到这种需求，如图：

背景半透明，文字正常显示
你看到之后会有什么样的解决方案呢？思考一会儿。
假设你思考了，可以看看和我的方法的区别，对比一下优劣，相互交流一下。

有的童鞋可能会随口说出opacity:50%; 这种可能会遇到坑哦；而opacity的坑主要在于按照上边的HTML代码结构设置父元素opacity：0.5；会发现作为子元素的文字也变透明了。

方案一：
html:

<div class="del_tip">
 <div class="del_word"> 
  <p>确定删除？</p>
  <span class="sure">确定</span>
  <span class="cancle">取消</span>
 </div>
</div>

 

css代码：

.del_tip {
  text-align: center;
  width: 125px;
  height: 203px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.del_tip .del_tip_word {
  position: inherit;
  top: 45%;
  left: 50%;
  margin-top: -25px;
  margin-left: -35px;
  color: #fff;
}
.del_tip .del_tip_word p {
  font-size: 16px;
  margin-bottom: 25px;
}
.del_tip .del_tip_word .sure {
  width: 50px;
  height: 25px;
  background: #ff4040;
  padding: 5px 10px;
  margin-left: -19px;
  cursor: pointer;
}
.del_tip .del_tip_word .cancle {
  width: 50px;
  height: 25px;
  background: #bbb;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
}

 

主要使用的是background:rgba(0,0,0,.5);这个属性。

 

方案二：
当然可以在写一个空的div当做背景。需要通过定位来实现。不在详细展开。

 

方案三：
还有一个跟rgba相似的就是hsla(0,0%,100%,.5);

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360
S：
Saturation(饱和度)。取值为：0.0% – 100.0%
L：
Lightness(亮度)。取值为：0.0% – 100.0%
A：
Alpha透明度。取值0~1之间。

兼容性IE9+，其他主流浏览器都支持。

相关文章