如何设置网页背景透明度而不让内容透明

使用rgba()

  • 背景无图片,只是设置背景颜色的透明度
body{
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
}
  • 背景有图片

使用<code>background: rgba(255,255,255,0.8);</code>时,rgba中的a只对背景颜色起作用,不对图片起作用,所以我们就想出了在背景前加上一个div,是这个div覆盖整个背景,然后设置此div的透明度就可以达到图片的透明度而不让文字透明。

width: 100%;
height: 100%;
margin: 0;
}
body{
text-align: center;
background: url(tulip_ballade_s.jpg) ;
}
 #a{
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
}````
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,585评论 0 7
  • 上节课讲了关于表格的一些更多知识和用表格配合div来进行网页排版。这节课开始讲关于网页图片的相关知识。 上节课的课...
    学哥量化交易学习阅读 8,291评论 3 3
  • CSS3简介 CSS3的现状 浏览器支持程度差,需要添加 私有前缀 ; 移动端支持优于PC端; 不断改进中; 应用...
    magic_pill阅读 4,286评论 0 1
  • 又是一个艳阳高照的好日子,总得有点有意思的事情发生才能匹配的上这样一个和美的周末! 是的,唯有一次玩美的OUTIN...
    祥祥布鲁斯阅读 3,624评论 0 6
  • 一朝琴瑟和鸣,一暮浮生若梦;朝歌夜弦笙笙,暮云春树无棱。 此去一别,然相忘于江湖,亦形同陌路,不念...
    Soulmates丶S阅读 3,199评论 0 4

友情链接更多精彩内容