html – 如何将背景图像重复为块

发布时间：2020-12-14 23:25:58 所属栏目：资源来源：网络整理

导读：是否可以将背景图像重复为块？当我将div设为100％宽度并将高度设置为70px时,此图像重复良好,但问题取决于盒子的宽度,有时一半的项目显示出来并且没有任何意义.我希望整个图像重复,如果有空间,如果没有重复应该结束.可能吗？ #wrapper { background-color: #E

是否可以将背景图像重复为块？当我将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>

这是图像

解决方法

尝试在你的CSS中添加：

background-repeat：round

所以你有了：

#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及以下(你不应该担心它).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!