css background-image：线性渐变在Safari中不起作用

xkrw2x1b 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(402)

我在我的网站的许多页面上都有一个问题，但这里有一个例子：https://mypieceofcakemove.com/storage/
在页面的英雄部分，我使用了Avada主题的选项来创建一个线性渐变的背景图像。
它在我的桌面上运行良好，甚至在我打开iPhone预览时检查工具：

但是当我在Safari中打开页面时，它看起来像这样，因为没有渐变背景，文本几乎不可见：

你能帮我解决这个问题吗？这是一个与浏览器支持线性梯度相关的问题吗？

下面是我的代码：

background-color: rgba(255,255,255,0);
background-image: url(https://mypieceofcakemove.com/wp-content/uploads/2020/05/hero-bg-best-storage-nyc.jpg);
background-image: linear-gradient(
180deg
, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%),url(https://mypieceofcakemove.com/wp-content/uploads/2020/05/hero-bg-best-storage-nyc.jpg);
background-position: center center;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: -156px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

css

来源：https://stackoverflow.com/questions/68117536/background-image-linear-gradient-not-working-in-safari

2条答案

按热度按时间

v1l68za41#

此**与iOS在15.3版本之前部分支持linear-gradient作为background-image有关。
您可以使用伪元素在图像顶部添加颜色：

.block::before {
  background-color: rgba(0, 0, 0, 0.4);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

如果你只想在需要的时候使用这个回退，你可以使用@support：

.block {
  background-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%),
    url(https://mypieceofcakemove.com/wp-content/uploads/2020/05/hero-bg-best-storage-nyc.jpg
  );
}

@support not (background-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%)) {
  .block::before {
    background-color: rgba(0, 0, 0, 0.4);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
  }
}

在这里您可以检查浏览器是否支持某个规则。如果不支持，则使用提供的规则。

赞(0）回复(0）举报 2023-04-08

wnavrhmk2#

background-image：linear-gradient（to bottom，rgba（0，0，0，0.4）0%，rgba（0，0，0，0.4）100%），url（https://mypieceofcakemove.com/wp-content/uploads/2020/05/hero-bg-best-storage-nyc.jpg）;enter code here

赞(0）回复(0）举报 2023-04-08

我来回答

css background-image：线性渐变在Safari中不起作用

2条答案

相关问题

热门标签

最新问答