Question

即使我为它设置了repeat-x，会导致背景图像不重复的原因是什么？我需要这些电视跨越我的x轴的宽度，我只是无法弄明白。

#footer{
    clear: both;
    height: 50px;
    padding-top: 15px;
    background-color: black;
    color: white;
    text-align: center;
}

#tvs{
   background-image: url(tvs-627x100.png);
    height: 100px;
    width: 627px;
    background-repeat: repeat-x;}

<div id="footer">
Stop watching TV and write some code!
            </div>

<div id="tvs">
            </div>

我在哪里错了？这也是我的jsfiddle ......

https://jsfiddle.net/dubh09mh/#&togetherjs=pxUyFRivNn

Answer 1

试试这个：

#tvs{
   background: transparent url(https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg) repeat-x left center;
    height: 100px;
    width: 100%;
 }

Answer 2

以这种方式使用repeat：

#tvs {
  background: url(https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg) repeat-x left center;
  height: 100px;
  width: 627px;
  background-repeat: repeat-x;
}

您还需要指定初始位置。

小提琴：https://jsfiddle.net/dubh09mh/2/

Answer 3

将此添加到您的代码中 background-size: contain;

这是fiddle。

为什么我的背景图片不会重复？

3 个答案: