Question

我的body元素有多个背景。

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
    }

Answer 1

您需要使用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%);

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

1 个答案: