☰

如何在 HTML/JavaScript 中为改变的背景图像添加属性？

tag-icon • tag-icon images html javascript
如何在 HTML/JavaScript 中为改变的背景图像添加属性？

我正在尝试弄清楚如何创建一个函数，让用户通过输入的图片 URL 在我的网站上设置自己的背景图片。起初这是我的代码：

<a href="#" onclick="funcBgImage()"><img src="example.com/example-image-url.png" height=50, width=50></img></a>


<script>
function funcBgImage() {
var imageurl = prompt("Enter Image URL",
"");
            if (imageurl != null) { 
            document.body.style.background = "url('" + imageurl + "')"
}


}
</script>

成功了！但是问题来了：

每次如果您将图像设置为太大或太小，它只会重复出现，不会居中，也不会调整大小。我尝试使用以下代码修复它：

            if (imageurl != null) { 
            document.body.style.background = "url('" + imageurl + "');background-repeat:no-repeat;background-size:cover;"

但这使得代码根本没有设置背景，所以它不起作用。

有什么帮助吗？我真的需要弄清楚。

答案1

我试过你的代码，发现一些问题。每当你使用 javaScript 指定样式时，在这种情况下，你必须编写 document.body.style，然后编写你的属性。通过这种方式，你可以添加多种样式。你可以使用以下代码，它有效！

<a href="#" onclick="funcBgImage()"><img src="example.com/example-image-url.png" height=500, width=500></img></a>
<script>
    function funcBgImage() {
        var imageurl = prompt("Enter Image URL", "");
        if (imageurl != null) {
            document.body.style.background = "url('" + imageurl + "')";
            document.body.style.backgroundRepeat = "no-repeat";
            document.body.style.backgroundSize = "cover";
        }
    }
</script>

相关内容