📌  相关文章
📜  HTML | DOM 样式 backgroundSize 属性(1)

📅  最后修改于: 2023-12-03 14:41:49.816000             🧑  作者: Mango

HTML | DOM 样式 backgroundSize 属性

backgroundSize 属性是CSS3中新增的属性之一，用于设置元素背景图片的大小。在HTML和DOM中使用该属性，可以通过CSS或JavaScript进行设置和修改。

CSS使用backgroundSize属性

通过CSS设置元素的背景图片大小，可以使用 backgroundSize 属性，定义元素的 background-size 样式。

background-size 样式可以接收多个参数值，常用的有以下几种：

  • cover - 按比例缩放背景图片，使其完全覆盖元素，可能会被裁剪。
  • contain - 按比例缩放背景图片，使其完全包含在元素中，可能会有空白区域。
  • width height - 指定背景图片的宽度和高度，可以使用任何长度单位。
  • auto - 让浏览器计算或保持背景图片的原始大小。

以下是一个示例代码片段，展示了如何使用 backgroundSize 属性设置元素背景图片的大小：

/* 将元素的背景图片设置为完全覆盖元素 */
div {
  background-image: url("example.jpg");
  background-size: cover;
}

/* 将元素的背景图片设置为完全包含在元素中 */
div {
  background-image: url("example.jpg");
  background-size: contain;
}

/* 将元素的背景图片宽度设置为 400px，高度设置为 auto */
div {
  background-image: url("example.jpg");
  background-size: 400px auto;
}
JavaScript使用backgroundSize属性

通过JavaScript设置元素的背景图片大小，可以使用元素的 style 对象，修改元素的 backgroundSize 属性。

以下是一个示例代码片段，展示了如何使用 style 对象修改元素的 backgroundSize 属性：

// 获取元素
var element = document.getElementById("example");

// 修改元素的背景图片大小
element.style.backgroundSize = "cover";
参考链接