Question

我正在使用两张图片作为背景图片。（两个引号标记为bookend）

当我只使用一张图片时，它可以在Safari中使用。当我用两个图像尝试这个CSS时，在Safari中不再起作用。但是在Firefox中有效。

background：transparent url（../ images / quote.png）no-repeat left top， url（../ images / quote2.png）no-repeat right bottom 25px;

Answer 1

这将有效：

background: url(../images/quote.png) top left no-repeat, 
            url(../images/quote2.png) right bottom 25px no-repeat;

您只能为最后（中间）图层指定背景颜色。在这种情况下，无论如何都不需要transparent。如果您要重置其他CSS，请在此行之前添加background-color: transparent;。

请记住，并非所有浏览器都支持此功能。更好的选择是将元素包装在容器div / span中。将一个背景应用于元素，将另一个背景应用于容器div / span。

Answer 2

谢谢你的建议。我之前曾尝试过你的div建议，但没有成功。但是，我最终仍然使用它。只有一个变化似乎对Safari很重要。它似乎不喜欢我定义的定位：右下25px不重复特别是右边和底部。

这是我最终使用的结果。可能是flexslider交互的问题。不确定。但这确实奏效了。再次感谢你。

.flexslider { margin: 0; padding: 0 0 0 25px; background:transparent url(../images/quote.png) no-repeat left top; } 

.flexslider .slides #test-text{ background: url(../images/quote2.png) no-repeat 345px 96px; }

当使用两个图像的背景不在野生动物园工作

2 个答案: