blocks|key|5414|text|有一定级别的margin或padding从嵌套/父元素继承其默认值。你需要重置它们才能得到你想要的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5415|在上面的代码中，以为例使用|5416|{
+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+*/
+}|code-block|syntax|javascript|5417|编辑：|BOLD|5418|根据OP提供的更新小提琴，下面是解决方案。|5419|5420|+CSS代码更改：|5421|<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>|5422|希望这能有所帮助。|5423|entityMap^0|6|6|D|7|0|0|0|0|3|0|0|L|0|0|0|9|0|0|0|9|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@$9|18|A|19|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1A|8|@$9|1B|A|1C|B|O]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1E|8|@$9|1F|A|1G|B|O]]|D|@]|E|$]]|$1|U|3|V|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1I|8|@$9|1J|A|1K|B|O]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|Z|$]]

There is a certain level of <code>margin</code> or <code>padding</code> that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.

From your above code, For Instance,

<pre><code>{
 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 */
 }
</code></pre>

EDIT:

As per the updated fiddle provided by the OP, below is the solution.

<a href="http://jsfiddle.net/c9j2D/5/" rel="nofollow">WORKING DEMO</a>

The CSS Code Change:

<pre><code>&lt;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"&gt;&lt;/div&gt;
</code></pre>

Hope this helps.

blocks|key|5429|text|试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5430|.content
{
++++display:block;
++++position:relative;
++++float:left;
++++width:1000px;
++++background:#ccc;
++++height:300px;
}|code-block|syntax|javascript|5431|http://jsfiddle.net/c9j2D/7/|offset|length|5432|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

try this one

<pre><code>.content
{
 display:block;
 position:relative;
 float:left;
 width:1000px;
 background:#ccc;
 height:300px;
}
</code></pre>

<a href="http://jsfiddle.net/c9j2D/7/" rel="nofollow">http://jsfiddle.net/c9j2D/7/</a>

Repeat-x property for CSS is not working as required.

I have a 50px image (to be used as background image).

I take a 200px div and set the 50px image as background with repeat-x css property.

The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.

css property:

<pre><code>{
 width:200px;
 height:27px;
 position:absolute;
 background:url(./img/common/bg_grid.jpg) repeat-x left top;
 background-size:50px 27px;
 }
</code></pre>

<img src="https://i.stack.imgur.com/INxej.png" alt="enter image description here">

<img src="https://i.stack.imgur.com/5ebiu.jpg" alt="enter image description here">

from above link you may find correct background image

<img src="https://i.stack.imgur.com/y30kK.png" alt="enter image description here">

<img src="https://i.stack.imgur.com/p75ir.png" alt="enter image description here">

Issue with repeat-x in CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

CSS的Repeat-x属性未按要求工作。我有一个50px的图像(将用作背景图像)。我使用一个200px的div，并使用-x css属性将50px的图像设置为背景。我面临的问题是4张图片(4 * 50px = 200px)是正确绘制的，并且图像的一小部分也是在最后绘制的。因为我认为这额外的部分不应该被提取。请帮帮忙。c...

问CSS中的-x重复出现问题
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的-x重复出现问题EN