背景图像移动时只能在内边距内移动

Question

html中的代码为

<div class="title">
<div>文字推荐</div>
<div>

css中的代码为

div{padding-top:20px;
    background:url(images/photo.jpg)
                20px  repeat-x;}

那么问题来了，背景图像特别小，当把repeat-x去掉后，背景图像平铺，包括文字和内边距，但当把repeat-x加上后，把背景图像上下移动时，只能在内边距范围内移动并不能作为“文字推荐”的背景，是为什么呢？

Answer 1

写的有问题吧？
你为啥不给文字推荐所在的div单独加background呢？
同时css3提供了新的样式

.content{
    background-image:url("images/photo.jpg");
    background-origin:content-box;
    background-repeat: repeat-x;
}

这么写

<div class="title">
    <div class="content">文字推荐</div>
<div>

div{
    padding-top:20px;
    }
.content{
background:url(images/photo.jpg) 20px  repeat-x;
}

然后可以试试上面说的新样式

不会的去MDN上查

Answer 2

你是不是发现父元素的越高，图片越往下？那是因为元素background-position被默认设置为:center，你只要把div上的background-position改为initial或者inherit就OK 了