背景图像:线性渐变在 Safari 中不起作用

时间:2021-06-24 14:18:29

标签: css safari background-image linear-gradients

我在网站的许多页面上都遇到了问题,但以一个为例:https://mypieceofcakemove.com/storage/

在页面的英雄部分,我使用 Avada 主题的选项在我的背景图像上创建线性渐变。

当我打开 iPhone 预览时,它在我的桌面上运行良好,甚至在检查工具中运行良好: Google Chrome browser

但是当我在 Safari 中打开页面时,它看起来像这样并且由于没有渐变背景,文本几乎不可见: enter image description here

你能帮我解决这个问题吗?是否与浏览器对线性渐变的支持有关? https://caniuse.com/?search=linear-gradient

这是我的代码:

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;

1 个答案:

答案 0 :(得分:-1)

背景图像:线性梯度( 到底部 , 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

相关问题