文本截取图片(哪吒之魔童降世壁纸)

background-clip:text兼容性不太好
1.文字截取背景色:兼容IE9+、Firefox、Opera、Chrome 以及 Safari
2.文字截取背景图片:只兼容Chrome

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

 <style>
        body,
        html {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
        }
        * {
            padding: 0;
            margin: 0;
        }
        div span {
            display: inline-block;
            width: 100%;
            height: 100%;
            background: url('http://img1.imgtn.bdimg.com/it/u=4003626994,439538869&fm=11&gp=0.jpg') no-repeat;
            background-size: cover;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
<div>
     <span></span>
</div>
var span = document.getElementsByTagName('span')[0];
var spanText = '';
for (var i = 0; i < 360; i++) {
     spanText += '哪吒魔童降世'
}
span.innerHTML = spanText;
发布了14 篇原创文章 · 获赞 10 · 访问量 1407

猜你喜欢

转载自blog.csdn.net/weixin_44708870/article/details/103111412