Question

我的HTML中有一个css background-url，如下所示：

http://host/services/resizeimage/187261/width/500

HTML background-url适用于移动设备，因此我需要使用动态宽度。我需要的是一种获取设备宽度并动态放置在background-url内的方法。

不太清楚如何处理这个问题。

Answer 1

最简单的方法是使用Javascript。

document.getElementById("YOUR_ELEMENT_HERE").style.backgroundImage = "url(http://host/services/resizeimage/187261/width/" + screen.width + ")"; 这会将YOUR_ELEMENT_HERE的背景设置为网址http://host/services/resizeimage/187261/width/，然后将屏幕宽度（以像素为单位）附加到网址。

将YOUR_ELEMENT_HERE替换为实际的元素ID，并将其放入您的身体。

如果它是身体的背景，您可以使用document.body代替document.getElementById，因此它变为

document.body.style.backgroundImage = "url(http://host/services/resizeimage/187261/width/" + screen.width + ")";

Answer 2

尝试使用CSS3 @media规则。您可以找到有用的here或here for the full reference。

但基本上，你可以使用这样的东西：

body{
    background-url: url('http://host/services/resizeimage/187261/width/500')
}

@media screen and (max-width: 400px) {
    body {
        background-url: url('http://something.else/');
    }
}

在上面的示例中，默认的背景网址是 http://host/services/resizeimage/187261/width/500，但如果屏幕宽度小于400像素，则会更改为http://something.else/。

我希望这回答了你的问题。

Answer 3

body {
    background: url('http://host/services/resizeimage/187261/width/500') no-repeat center center fixed;
    background-size: cover;
    }

这确保了背景图像将始终覆盖事物，而不是使用动态Web更改使其变慢，有时不会首先尝试加载。这也确保了同时保持一定的宽高比不会显得笨重。

获取宽度并放置在css背景图像url中

3 个答案: