html - 如何将背景图像作为 block 重复

Question

是否可以将背景图像作为一个 block 重复？当我将 div 设置为 100% 宽度并将高度设置为 70px 时，此图像重复效果很好，但问题取决于框的宽度，有时会显示一半的元素，这没有任何意义。如果没有空间，我希望整个图像重复，如果不重复应该结束。可能吗？

#wrapper {
  background-color: #E3E3E3;
  position: relative;
  padding: 55px 0 0 0;
}
#notepadTop {
  display: block;
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 70px;
  background: url('http://i.imgur.com/lbW0QX6.png') repeat;
}

<div id="wrapper">
  <div id="notepadTop">

  </div>
</div>

这是图片

Answer 1

尝试将此添加到您的 CSS 中:

背景重复:圆形

所以，你有:

#notepadTop {
  display: block;
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('http://i.imgur.com/lbW0QX6.png');
  background-repeat: round;
}

值 round 是一个新的 CSS3 选项，因此这在 IE8 及以下版本上不起作用(您不必担心)。