我正在开发一个网站,但在使用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
有人知道该问题的解决方案吗?预先感谢。
我已经检查了您的网站,并能够解决您的野生动物园问题。它与您为body{}
定义的渐变无关,但与.single-product{}
]的背景大小无关
尝试更改
.single-product { background-size: auto 1060px; }
to
.single-product { background-size: 100% 1060px; }
[它在Chrome和Safari中适用于我(未经Edge或Firefox测试)。