如何在单击按钮时将文本颜色更改为gif(背景剪辑)

几周以来，我一直在想如何编写脚本：-

function Myfunction() {
document.getElementById('d').style.weblitbackgroundClip ="url('https://upload.wikimedia.org/wikipedia/commons/5/5d/BurningFlame0.gif')";
document.getElementById('d').style.webkitbackgroundClip ="text";
}

当我用onClick="Myfunction"点击按钮时，它不起作用

我的剧本有什么问题吗？或者它在互联网上不起作用？

">d"是我文本的id

您可能想要这样的东西：

把这个放在你的风格：

<style>
#container {
background:no-repeat center center;
background-size: 100%;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
</style>

应该有这样的标签结构：

<body>
<div id="container">
<h1>hello world</h1>
</div>
<button onclick="Myfunction()">click on me</button>
</body>

最后在你的脚本中写下：

<script>
function Myfunction(){
document.getElementById('container').style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/5/5d/BurningFlame0.gif')";
}
</script>

function Myfunction(){
document.getElementById('container').style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/5/5d/BurningFlame0.gif')";
}

#container {
background:no-repeat center center;
background-size: 100%;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

<div id="container">
<h1>hello world</h1>
</div>
<button onclick="Myfunction()">click on me</button>

将()添加到onClick="Myfunction"，您需要将文本设置为color: transparent

function Myfunction() {
var dStyle = document.getElementById('d').style
dStyle.backgroundImage = "url(https://media.giphy.com/media/edYeOfmb9zaIo/giphy.gif)";
dStyle.backgroundClip = "text";
dStyle.webkitBackgroundClip = "text";
dStyle.color = 'transparent'
}

#d {font-size: 60px; font-weight: bold;}

<div id="d" onClick="Myfunction()">
Burning Flame
</div>

相关内容

最新更新

热门标签：