文本截取图片（哪吒之魔童降世壁纸）

最新推荐文章于 2022-03-06 12:45:58 发布

前行的枫_denglinbo

最新推荐文章于 2022-03-06 12:45:58 发布

阅读量682

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44708870/article/details/103111412

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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;