当使用两个图像作为背景时，在 Safari 中不起作用答案

【问题标题】：when using two images for background not working in safari当使用两个图像作为背景时，在 Safari 中不起作用
【发布时间】：2013-06-19 21:54:26
【问题描述】：

我使用两张图片作为背景图片。（书尾的两个引号）

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

背景：透明网址（../images/quote.png）不重复左上角， url(../images/quote2.png) 右下角不重复 25px;

【问题讨论】：

标签： safari background-image

【解决方案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。

【讨论】：

【解决方案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; }

【讨论】：