背景重复不使用绝对位置

Question

图片用作背景图片absolute positioned它具有repeat-x属性但无法正常工作

 <div>
    <div class="background-image">
    </div>
 </div>


 .background-image{
       position:absolute;
       background-image : url(...);
       background-repeat: repeat-x;
  }

有没有解决方案？

Answer 1

你必须设置.background-image类的高度，还要设置容器div的宽度。

希望这会有所帮助

div { 
  margin: 0 auto;
  width: 600px;
  background-color: #ccc;
}

.background-image {
  position: absolute;
  background-image: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle-social_facebook_outline_stroke-128.png);
  background-repeat: repeat-x;
  height: 130px;
}