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

问题描述

问 题

html中的代码为

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

css中的代码为

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

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

解决方案

写的有问题吧？
你为啥不给文字推荐所在的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上查

这篇关于css - 背景图像移动时只能在内边距内移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！