HTML

📌 相关文章

📜 HTML | DOM Style backgroundRepeat 属性(1)

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

HTML | DOM Style backgroundRepeat 属性

概述

backgroundRepeat 属性用于设置元素背景图片的重复方式。如果图片比元素大，那么在图片被重复完之前，图片将不会被缩放。该属性可应用于所有的元素，但只有像素图片才能被平铺。

语法

element.style.backgroundRepeat="repeat-x|repeat-y|no-repeat|initial|inherit"

属性值

repeat-x：横向重复。
repeat-y：纵向重复。
no-repeat：不重复。
initial：默认值。背景图像重复。
inherit：从父元素继承 background-repeat 属性。

示例

<!DOCTYPE html>
<html>
<head>
  <title>backgroundRepeat 属性</title>
  <style>
    .background-repeat {
      height: 200px;
      width: 300px;
      background-image: url('https://via.placeholder.com/300x200.png');
      background-repeat: repeat-x;
    }
  </style>
</head>
<body>
  <div class="background-repeat"></div>
</body>
</html>

JavaScript

let element = document.querySelector('.background-repeat');
element.style.backgroundRepeat = 'repeat-y';

结论

backgroundRepeat 属性用于设置元素背景图片的重复方式。可以使用 JavaScript 修改 backgroundRepeat 属性的值。