背景图像在我的 Safari 中不起作用

【问题标题】：Background image not working in my safari背景图像在我的 Safari 中不起作用
【发布时间】：2022-01-20 13:21:56
【问题描述】：

我的 css 代码在 chrome 中运行良好，但在 safari 中根本无法运行

.bg-gradient-dark {
    background-image: linear-gradient(
310deg
, #141727 0%, #3A416F 100%);
   
}

【问题讨论】：

您的 Safari 版本是多少？根据MDN docs，您可能需要添加-webkit 供应商前缀。
@Raptor 版本 14.1.2 (14611.3.10.1.7)
还有其他相关的 CSS 吗？我无法让您给出的代码出错。您能否输入一个 sn-p 我们可以遇到您的问题并对其进行测试以确保它显示问题。见stackoverflow.com/help/minimal-reproducible-example

标签： css safari

【解决方案1】：

.bg-gradient-dark {
    background-image: linear-gradient(310deg, #141727 0%, #3A416F 100%);
    background-image: -webkit-linear-gradient(310deg, #141727 0%, #3A416F 100%);
    background-image:    -moz-linear-gradient(310deg, #141727 0%, #3A416F 100%);
    background-image:      -o-linear-gradient(310deg, #141727 0%, #3A416F 100%);
    background-image:         linear-gradient(to 310deg, #141727 0%, #3A416F 100%);
}

你需要添加前缀，所以它可以在另一个浏览器中工作
主要浏览器使用以下前缀：

-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based
browser)
-moz- (Firefox)
-o- (old pre-WebKit versions of Opera)
-ms- (Internet Explorer and Microsoft Edge)

这里是来自 MDN 的关于 prefix 的文档

【讨论】：