html文字镂空（图片上的文字镂空）

 

 

 今天看到一个设计图，客户需求是，里面文字是可变的……如图

 

查了半天度娘，墙都翻了，没找到类似案例；算了，自己搞

 

利用属性：

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

 

再根据背景偏移来搞一下，结果，真成了；不知道有没有其他牛逼plus的方法，就将就用一下；

<!DOCTYPE html>
<html style="font-size:50px;"><!-- 根据rem，自行替换（本文写死） -->
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="UTF-8">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta name="format-detection" content="telephone=no" />
        <title></title>
        <style>
            *{margin:0;padding:0;font-family: "微软雅黑";}    
        </style>
    </head>
    <body>
        <div class="demo" data-color="09b6f2">
            <img src="https://vncdn.mobi88.cn/suchen/suchen.jpg" alt="" />
            <div><span style="background:url(https://vncdn.mobi88.cn/suchen/suchen.jpg) no-repeat;">苏尘</span></div>
        </div>
        <style>
            .demo{
                width:5rem;                                            /*外层大小*/
                height:5rem;                                        /*外层大小*/
                text-align:center;
                position:relative;}
            .demo img{
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;}
            .demo div{
                background:rgba(255,255,255,1);
                width:2rem;
                height:2rem;
                text-align:center;
                line-height:2rem;
                font-size:0.8rem;
                font-weight:bold;
                position:absolute;
                z-index:6;
                left:0.5rem;                                        /*记住这个距离*/
                top:0.5rem;                                            /*记住这个距离*/
                border-radius:1rem;}
            .demo span{
                display:block;
                width:100%;
                height:100%;
                display:block;
                position:absolute;
                z-index:5;
                background-position:-0.5rem -0.5rem !important;        /*等于负父元素偏移距离*/
                background-size:5rem 5rem !important;                /*等于最外层大小*/
                -webkit-background-clip:text !important;
                -webkit-text-fill-color:transparent !important;}
        </style>
    </body>
</html>

 

技术有限，先这样玩，希望有帮助

 

posted @ 2021-04-06 17:24  苏尘尘  阅读(539)  评论(0)  编辑  收藏  举报