主页 / computer / 问题 / 1479478
Accepted
thanoschimichan-ga
Asked: 2019-09-06 18:54:51 +0800 CST

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

  • 772

我试图弄清楚如何制作一个功能，允许用户通过他们输入的图像 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;"

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

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

html images

1 个回答

  1. Best Answer

    我已经尝试了您的代码并发现了一些问题。每当您使用 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>
    • 0

相关问题