在Safari中没有显示多个背景（移动/桌面）

我的body元素上有多个背景。在Safari中没有显示多个背景（移动/桌面）

body { background:linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(182,176,157, .5) 100%),url("images/flower-bg.jpg") repeat #eae7de }

它在IE，FF和Chrome的最新版本中显示得很好。但是，两种背景中都没有出现在Safari中。

Here is the site.

人可以帮我指出我哪里错了？

编辑：试过这个，但它没有奏效。

body { 
    background:-webkit-linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(182,176,157, .5) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    background:linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(182,176,157, .5) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    }

编辑2：试过这个，但它也没有工作。现在任何浏览器都不显示背景。

body { 
background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    }

编辑3：这是我的身体代码的其余部分看起来像。

body { 
    background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%),url("images/flower-bg.jpg") repeat #eae7de; 
    color:#544a46; 
    font:62.5%/1.6 Helvetica, Arial, Sans-serif 
    }

来源

2013-05-31 J82

这是你在桌面上使用的浏览器？ –

@Kees在Chrome，Firefox和IE的最新版本中，它对我来说显得很好。我刚刚检查了Safari，并且它也没有显示在桌面版本中。糟糕，我会添加那个细节。 – J82

您需要使用background-image:代替

试试这个代码：

background-image: url('yourimage.jpg'); /*fallback*/ 
background-image: url('yourimage.jpg'), linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%); 
background-image: url('yourimage.jpg'), -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%); 
background-image: url('yourimage.jpg'), -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%); 
background-image: url('yourimage.jpg'), -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%); 
background-image: url('yourimage.jpg'), -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(183,176,157) 100%);

来源

2013-05-31 10:50:26

我加了这个，但还是没有显示。顺便说一下，我忘了原始帖子中的“背景”，所以我将其添加到了我添加的代码中。 – J82

看我的编辑。希望修复它。 –

如何添加花卉图片的网址？ – J82

在Safari中没有显示多个背景（移动/桌面）

回答

相关问题