美文网首页Web 前端开发 技术干货让前端飞
如何设置网页背景透明度而不让内容透明

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

作者: 每木传情 | 来源:发表于2017-06-01 11:08 被阅读0次

    使用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);
    }````

    相关文章

      网友评论

        本文标题:如何设置网页背景透明度而不让内容透明

        本文链接:https://www.haomeiwen.com/subject/gywsfxtx.html