css - CSS 中的 repeat-x 问题

Question

CSS 的 Repeat-x 属性未按要求工作。

我有一张 50px 的图片(用作背景图片)。

我使用一个 200 像素的 div 并使用 repeat-x css 属性将 50 像素的图像设置为背景。

我面临的问题是正确绘制了 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;
 }

从上面的链接你可以找到正确的背景图片

Answer 1

有一定程度的 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 提供的更新后的 fiddle ，以下是解决方案。

WORKING DEMO

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>

希望这对您有所帮助。