没有在Safari上显示的背景图像

时间:2013-06-25 03:41:12

标签: html css safari background-image

是否有人知道为什么以下CSS无法在Safari上显示我的背景图像。请注意,此CSS在其他浏览器上显示我的背景图像:

.thGridColumnHeader
{
    background-image: url('../Images/Textures/glass.png');
    background-image: none,-webkit-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,-moz-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,-o-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
    background-color: #1d1d1d;
}

以下是其他浏览器的输出

enter image description here

以下是safari上的输出

enter image description here

2 个答案:

答案 0 :(得分:2)

我刚刚在CSS课程中进行了以下调整,从而解决了我的问题。

.thGridColumnHeader
{
    background-image: none,-webkit-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,-moz-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,-o-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
    background-color: #1d1d1d;
    background-image: url('../Images/Textures/glass.png');
}

我已将下面的代码转移到CSS类的最后一部分,但它确实有效。

    background-image: url('../Images/Textures/glass.png');

以下是safari上的输出:

enter image description here

答案 1 :(得分:2)

我在Safari下的视差背景图像也有同样的问题。我通过将z-index添加到样式

来解决它
z-index:-1;