zoukankan      html  css  js  c++  java
  • CSS实现背景图片透明和文字不透明效果

    1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px)

        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
    }
    .demo1:before{
        background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;/*-1 可以当背景*/
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
    
    <div class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</div>

    2.半透明效果:背景图 + 定位 + background:rgba(255,255,255,0.3)

    .demo2-bg{
        background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        position: relative;
    }
    .demo2{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
        background:rgba(255,255,255,0.3);
    }

    <div class="demo2-bg"> <div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div> </div>



     原文链接:https://blog.csdn.net/hj7jay/article/details/73480609

  • 相关阅读:
    HRBUST 1849 商品中心
    UVA 11600 Masud Rana
    Codeforces Round #580 (Div.1)
    loj 6270 数据结构板子题
    luogu P1758 [NOI2009]管道取珠
    luogu P1852 [国家集训队]跳跳棋
    51nod 2589 快速讨伐
    SICP_3.9-3.11
    SICP_3.7-3.8
    SICP_3.5-3.6
  • 原文地址:https://www.cnblogs.com/cap-rq/p/9957608.html
Copyright © 2011-2022 走看看