php div不能设置background-color,CSS 设置某元素的背景颜色透明

要设置某一元素的背景为透明,在 chrome 、firefox、opera 下是这样的:

background-color: rgba(0, 0, 0, 0.4);

rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0~1之间。

在 ie 中一般是这样的:

background-color: rgb(0, 0, 0);

filter: alpha(opacity=40);

opacity 表示透明度,它的值范围在 0~100 之间

那么如何兼容各浏览器呢?只要把它们写在一起就行了。

由于 ie 不支持 rgba,所以会忽略之。其他浏览器对于自己不支持的,一般也会忽略。

下面来个示例:

HTML 代码:

aaaaa

box

CSS 代码:

.non-transparent:hover {

background-color: yellow;

}

.transparent {

position: absolute;

top: 0;

left: 0;

text-align: center;

width: 100%;

height: 100%;

filter: alpha(opacity=40);

background-color: rgb(0, 0, 0);

background-color: rgba(0, 0, 0, 0.4);

}

.box {

background-color: yellow;

width: 50%;

height: 50%;

position: relative;

left: 5%;

top: 10%;

}

显示效果:

chrome:

20180330192748_86102.png

firefox:

20180330192822_61541.png

opera:

20180330192822_76271.png

ie8:

20180330192822_34414.png

另外,在 chrome、firefox、opera 中也可以这样:

opacity: 0.4;

但是这样的话,会把所有子元素的透明度也设置为同样的值,效果如下图:

20180330192822_15144.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值