我在网站的许多页面上都遇到了问题,但这里举一个例子: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;
这个是与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%;
}
}
在这里检查浏览器是否支持某些规则。如果没有,它使用提供的规则。
确保查看 Emotion 文档 以获取处理此确切问题的示例。
背景图像:线性渐变( 到底 , 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
Hej Borise,我的网站也有同样的问题,你能帮我吗,https://www.experiamoving.com/movers-nyc-to-hamptons 这是我的电子邮件地址。 nickradunovich@gmailcom.