HTML | DOM 样式背景属性

在HTML和DOM中，背景属性是用于控制元素的背景样式的属性集合。

HTML 背景属性

background-color

background-color 属性用于设置元素的背景颜色。

<div style="background-color: #ff0000;"></div>

background-image

background-image 属性用于设置元素的背景图像。

<div style="background-image: url('image.jpg');"></div>

background-repeat

background-repeat 属性用于设置元素背景图像的重复方式。

<div style="background-image: url('image.jpg'); background-repeat: no-repeat;"></div>

background-position

background-position 属性用于设置元素背景图像的位置。

<div style="background-image: url('image.jpg'); background-position: left top;"></div>

background-attachment

background-attachment 属性用于将背景图像固定在视口中。

<div style="background-image: url('image.jpg'); background-attachment: fixed;"></div>

DOM 背景属性

style.backgroundColor

style.backgroundColor 属性用于设置元素的背景颜色。

<script>
  document.getElementById("someDiv").style.backgroundColor = "red";
</script>

style.backgroundImage

style.backgroundImage 属性用于设置元素的背景图像。

<script>
  document.getElementById("someDiv").style.backgroundImage = "url('image.jpg')";
</script>

style.backgroundRepeat

style.backgroundRepeat 属性用于设置元素背景图像的重复方式。

<script>
  document.getElementById("someDiv").style.backgroundRepeat = "no-repeat";
</script>

style.backgroundPosition

style.backgroundPosition 属性用于设置元素背景图像的位置。

<script>
  document.getElementById("someDiv").style.backgroundPosition = "left top";
</script>

style.backgroundAttachment

style.backgroundAttachment 属性用于将背景图像固定在视口中。

<script>
  document.getElementById("someDiv").style.backgroundAttachment = "fixed";
</script>

以上是HTML和DOM中常用的背景属性。除了上述属性外，还有其他一些用于控制背景的属性，开发者可以根据实际需求来选择使用。