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

作者: 漆家洲 分类: Photoshop 发布时间: 2016-07-06 15:56 浏览次数:1,160

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

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

有的童鞋可能会随口说出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代码:
less下的嵌套:

.del_tip{

text-align: center;

width:125px;

height:203px;

position: absolute;

background:rgba(0,0,0,.5);

display:none;

.del_tip_word{

position: inherit;

top:45%;

left:50%;

margin-top: -25px;

margin-left:-35px;

color:#fff;

p{

font-size: 16px;

margin-bottom: 25px;

}

.sure{

width:50px;

height: 25px;

background: #ff4040;

padding:5px 10px;

margin-left: -19px;

cursor: pointer;

}

.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+,其他主流浏览器都支持。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!