Question

一个div里如何实现图片从左边某个位置铺到右边某个位置

比如说我有一个div，宽100px,高30px。如何实现一张宽2px,高30px的背景图片从左边10px处平铺到右边90px处。也就是左右各留10px的空白区域，中间是图片。
我说一下我为什么要问这个问题。因为我想实现圆角边框。比如说现在需要做一个圆角边框的搜索栏，代码思路如上面所示，现在我不确定的是大背景是什么颜色，所以搜索栏左右圆角图片采用的是png格式的图片，这样能露出大背景。问题就出在这，他不能遮挡bg.jpg在四个圆角处平铺的部分，所以我才问各位能不能让上面最外层的div平铺时左右各留部分空白

Answer 1

可以的，两边留10像素的margin，中间背景横向平铺可以，稍等，我写一个。

刚测了一下，需要给外面的div定宽度，效果才明显：

html：

<div class="wrap">
    <div id="demo2"></div>
</div>

css：

.wrap{
        background: red;
        width: 520px;
    }
    #demo2{
        width: 500px;
        height: 100px;  
        margin: 0 10px;      
        background: red url('/6rooms/html/img/gdhz1.jpg') repeat-x;
    }

有问题还可以追问。

追问

很感谢你们的回答，可能有个地方我没说清楚。这里我不希望嵌套div。也就是说自始至终只有一个div，只在这一个div里实现我描述的效果，不知道可不可以~~~

追答

是的，我加了一个嵌套的div是为了让你能清楚的看到效果。
不然的话你看不出效果呀？
你可以把外面的div去掉。

追问

如果方便的话，你能给demo2加一个border，把效果图贴给我看一下吗。因为我用你的方法还是不行

追答

圆角不就用border-radius来做么。

追问

这个兼容性不好~~~~

追答

刚刚看到background-origin属性，你可以看一下！

问题解决了吗

Answer 2

div的image的CSS repit-x:2,100； 2就是左边起始位置，100为右边结束位置。

追问

恕我孤陋寡闻，没见过repeat-x:始,末;这种写法。如果方便的话能把全部代码写出来吗？background:repeat-x 10px 20px;这种写法我见过，只不过他的意思并不是从水平10px平铺到20px处，而是从水平10px,垂直20px为起点，水平平铺。又因为repeat-x的存在，水平会被铺满。实现不了左右各留部分空白。

Answer 3

<div style="width:100px;height:30px;padding:10px;background:url(这里写图片路径) repeat-x;">

</div>

Answer 4

div {width:80px;height:30px;margin:0 10px;background:url(xx.jpg) repeat-x;}

追问

不行，我发现background里一旦写了repeat-x.直接从左铺到右，根本不受padding、margin和起始位置的控制。