Question

如何重复背景图像直到精确宽度？例如，我有一个width: 10px图片，我的div是width: 100px 现在我希望我的图像重复-x为50px然后什么也没有！用CSS可以吗？

Answer 1

否 - 您无法使用CSS将图像设置为重复x次。

你可能想看看你想要完成什么背后的逻辑 - 为什么不把div放到50px宽？或者添加一个居中的50px子div您应用背景图像？或者，使用50px的边距或边框使div为50px宽？

Answer 2

这是可能的，但您需要嵌套另一个div或span来实现您的目标。

对于实例，

<强> WORKING DEMO

HTML：

<div>
    <span></span>
</div>

CSS：

div {
    background-color: #808080;
    height: 100px;
    width: 100px;
}

span {
    background: url("http://heasarc.gsfc.nasa.gov/xamin/doc/img/delete.png") repeat-x scroll 0 0 #808080;
    display: inline-block;
    height: 100px;
    width: 50px;
}

希望这有帮助。

Answer 3

您不能用次数限制图像的重复。而不是你可以使用CSS技巧。

创建div'A'100px宽度
在div'A'
在Div'B'上重复背景图片。
将Div'B'放在您想要图像的位置。

HTML

<div class= 'A'>
    <div class='B'>
    </div>
</div>

CSS

.A {
    width:100px;
    height: 100px;
}
.B {
    width:50px;
    height: 100px;
    background: url("link") repeat-x;
}

重复背景图像直到精确的宽度

3 个答案: