Question

我有一个菜单栏，我正在尝试将两个图像附加到它上面这就是我做的 -

background:url('images/bgs/bg_container_top_left.png') no-repeat top left ,url('images/bgs/bg_container_top_center.png') no-repeat top right;

如何为此处附带的不同图像指定不同的属性？就像我想给第一张图片留出余量一样

margin-left:-10px;

和第二张图片

 margin-left:-5px;

Answer 1

如果你想定位图像而不是改变这些属性

示例：

background:url('images/bgs/bg_container_top_left.png') no-repeat top -10px ,url('images/bgs/bg_container_top_center.png') no-repeat top -5px;

或使用background-position: 0px 0px 0px 10px;。

Answer 2

试试这个

div{background: url('http://blog.agilebits.com/wp-content/uploads/2012/05/time-machine-icon.png') -5px top no-repeat, url('http://aux3.iconpedia.net/uploads/69290979.png') -10px top no-repeat ; }

<强> DEMO

Answer 3

CSS3允许使用多个背景图像。使用的格式是您在第一部分中显示的格式。

background: url('images/bgs/bg_container_top_left.png') left top no-repeat,
            url('images/bgs/bg_container_top_center.png') right top no-repeat;

我建议使用后台位置属性（https://developer.mozilla.org/en/docs/CSS/background-position）调整每个边框的起始位置，而不是使用我怀疑的边距可能不起作用（你可以自己测试）背景。如果每个元素的实际边距不同，您可能想要为每个背景创建单独的元素。您可以尝试使用此代码：

margin-left: -10px, -5px;

这遵循相同的格式（首先列出背景属性值1，然后列出值2秒），但我不确定是否支持这种格式。

在css中添加多个背景图像

3 个答案: