Question

自从几周以来，我一直在努力思考如何编写脚本：-

protected void RegisterRoutes(RouteCollection routes)
{
    routes.MapPageRoute("",
        "CommentImages/{id}.jpg",
        "~/CommentImages.aspx");
}

，当我用function Myfunction() { document.getElementById('d').style.weblitbackgroundClip ="url('https://upload.wikimedia.org/wikipedia/commons/5/5d/BurningFlame0.gif')"; document.getElementById('d').style.webkitbackgroundClip ="text"; }单击按钮时，它不起作用

我的脚本有问题吗？或者它不能在互联网上正常工作？

“ d ”是我的文字ID

Answer 1

您可能想要这样的东西：

将此设置为您的样式：

<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>

Answer 2

将()添加到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>

单击按钮后如何将文本颜色更改为gif（背景剪辑）？

2 个答案: