CSS中的-x重复出现问题
CSS中的-x重复出现问题
提问于 2013-12-17 18:02:52
CSS的Repeat-x属性未按要求工作。
我有一个50px的图像(将用作背景图像)。
我使用一个200px的div，并使用-x css属性将50px的图像设置为背景。
我面临的问题是4张图片(4 * 50px = 200px)是正确绘制的，并且图像的一小部分也是在最后绘制的。因为我认为这额外的部分不应该被提取。请帮帮忙。
css属性：
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
从上面的链接你可以找到正确的背景图片
回答 2
Stack Overflow用户
发布于 2013-12-17 18:06:41
有一定级别的margin或padding从嵌套/父元素继承其默认值。你需要重置它们才能得到你想要的东西。
在上面的代码中，以为例使用
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}编辑：
根据OP提供的更新小提琴，下面是解决方案。
CSS代码更改：
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>希望这能有所帮助。
Stack Overflow用户
发布于 2013-12-17 19:11:06
试试这个
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}http://jsfiddle.net/c9j2D/7/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20631128
复制相关文章
相似问题
腾讯云开发者
