使用css设置背景的宽度和高度

setting width and height for background using css

本文关键字：高度 css 设置 背景 使用      更新时间：2024-03-09

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

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

它不会起作用。图像保持原样。

知道我该怎么做吗。

如图所示，CSS3的background-size的js语法为：

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

所以，为了复制粘贴的舒适性，试试这个：

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

使用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");

背景大小是css3，但被许多浏览器广泛支持，正如您在这里看到的

就我个人而言，我会使用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';​
相关文章：