Question

我正在开发一个网站，但是在使用Safari时遇到了麻烦。我使用的background-image: -webkit-linear-gradient可以在Chrome，Firefox等设备上完美运行，但是在Safari上，输出却有所不同。它仅显示在屏幕的一半。

我在身上使用这种样式：

body {
    background-image: -webkit-linear-gradient(-40deg, #000,#333 50%, #f9f9f9 50%);
    background-size: auto 1200px;
    -webkit-background-size: auto 1200px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    top: 0;
    left: 0;
}

我已经尝试寻找解决方案，但到目前为止似乎没有任何效果。我已经测试了更改背景大小以覆盖的范围，但是它并没有给出我想要的输出，也没有设置top: 0;和left: 0;，如关于stackoverflow的其他问题所示，但这没有用

我正在谈论的指向特定页面的链接是这个页面：https://dashiofficial.com/product/test-product-01

有人知道这个问题的解决方案吗？预先感谢。

Answer 1

我已经检查了您的网站，并能够解决您的野生动物园问题。它与您为body{}定义的渐变无关，但与.single-product{}的背景大小无关

尝试更改

.single-product {
    background-size: auto 1060px;
}

到

.single-product {
    background-size: 100% 1060px;
}

它在Chrome和Safari中适用于我（未经Edge或Firefox测试）。

Safari上未显示背景线性渐变

1 个答案: