Question

我无法让图片在 HTML/CSS 中重复。我对此很陌生，所以我可能犯了一个基本错误，但我一生都无法弄清楚它是什么。

我在 index.html 中创建了一个 div

    ...
  <body>
     <div class="bakgrund"></div>
  </body>
    ...

还有我的 CSS 文件：

    .bakgrund {
  background-image: url("img/bakgrund.png");
  height: 200px;
  width: 200px;
}

图像仅显示一次。我想要做的是让图像在垂直和水平方向重复。当我在 body 标签中定义背景图像而不是 div 时，这可以完美地工作，这可能吗？

Answer 1

如果您的背景图片尺寸大于 div 尺寸，请像这样设置背景尺寸。

.bakgrund {
    background-image: url("https://www.w3schools.com/cssref/paper.gif");
    background-repeat: repeat;
    height: 200px;
    width: 200px;
    background-size: 20px 20px;
}

<body>
     <div class="bakgrund"></div>
  </body>

Answer 2

background-repeat 的默认值已经是repeat了，但是如果你需要在...中通过css重复背景图片呢？ 试试这个

.bakgrund {
    background: url("img/bakgrund.png") repeat;
    height: 200px;
    width: 200px;
}

Answer 3

将此行添加到您的 CSS 文件中

background-repeat: repeat;

div 中的背景图像不重复？

3 个答案: