使用CSS为背景设置宽度和高度

Question

我想设置图像的背景宽度和高度。

document.getElementById('outerModalPopupDiv').style.backgroundImage = "url('samandar_003.jpeg')";
document.getElementById('outerModalPopupDiv').style.backgroundRepeat = "no-repeat";

现在我要设置图像的宽度和高度。 我知道background-size: 200px 50px; 设置高度和宽度，但是我不能使用相同的值。 我必须以上述格式设置宽度和高度。

如果我用

document.getElementById('outerModalPopupDiv').style.background.size = "200px 500px";

它不会工作。 图像保持原样。

知道如何使它起作用。

Answer 1

正如所看到这里 ，对CSS3的JS的语法background-size是：

object.style.backgroundSize="60px 80px"

因此，为了方便复制，请尝试以下操作：

document.getElementById('outerModalPopupDiv').style.backgroundSize = "200px 500px";

Answer 2

使用css3，您可以设置背景大小：

#outerModalPopupDiv {
    background-size: 200px 500px;
}

你可以看到在这里

或者，如果您想使用javascript进行设置，则可以创建一个CSS类并将该类添加到元素中

javascript：

document.getElementById("outerModalPopupDiv").className += "resizeBg200x500";

CSS：

.resizeBg200x500 {
    background-size: 200px 500px;
}

或直接使用javascript：

document.getElementById("outerModalPopupDiv").style.backgroundSize="200px 500px";

或jQuery的另一种选择:)

$("#outerModalPopupDiv").css("background-size","200px 500px");

background-size是css3，但是许多浏览器广泛支持它，如您在此处所见

Answer 3

我个人将使用JS进行大小调整，并使用JS动态添加一个类

http://jsfiddle.net/spacebeers/FFeEh/15/

document.getElementById('outerModalPopupDiv').style.backgroundRepeat = "no-repeat";

var element = document.getElementById('outerModalPopupDiv');

element.className += element.className ? ' backgroundResize' : 'backgroundResize';​