网站开发进阶(五十玖)css实现背景透明,文字不透明

举报
SHQ5785 发表于 2021/03/07 15:28:18 2021/03/07
【摘要】 背景透明,文字不透明的解决方法:为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-index设置到最底部,达到背景半透明效果。使用CSS3新属性rgba。实现透明的方法:css3的opacity,取值从 0 到 1,如opacity : 0.5,IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性,例如:filt...

背景透明,文字不透明的解决方法:

  • 为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-index设置到最底部,达到背景半透明效果。

  • 使用CSS3新属性rgba

实现透明的方法:

css3opacity,取值从 0 到 1,如opacity : 0.5IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性,例如:filter : Alpha(opacity=50)

css3rgba(red, green, blue, alpha)alpha的取值从 0 到 1,如background-color : rgba(255,255,255,0.5)

谷歌浏览器下测试各种属性,如下:

<div style="width:150px; height:100px;float:left;background-color:#ff0000;"><div>没有设置透明度</div></div>

<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;opacity:0.5;"><div>用opacity设置透明度</div></div>

<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5);"><div>用rgba设置透明度</div></div>

<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;filter:Alpha(opacity=50);"><div>IE专属filter设置透明度</div></div>

效果图如下:
在这里插入图片描述
css3opacity

由上图可以看出,使用opacity属性的第二个方块,其子元素包含的文字也变成了半透明。

注释:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度,兼容IE9及以上版本和标准浏览器。

css3rgba

由上图可看出,设置rgba的方块可实现背景色透明,并且子元素包含的文字不透明。

注释:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都支持。

IE的filter : Alpha(opacity=x)
仅支持IE6、7、8、9,在IE10版本被废除。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。