时间戳

首页 > 解决方案 > 线性渐变在 Safari 上不显示正确的颜色

html - 线性渐变在 Safari 上不显示正确的颜色

问题描述

我有<div>一个简单的CSS：

.mapTop {
  z-index: 12;
  display: flex;
  align-items: center;
  padding-left: 30px;
  position: absolute;
  top: 0;
  width: 100%;
  height: 96px;
  background-image: linear-gradient(to top, rgba(45,59,78,0), #fff);
  box-sizing: border-box;
  border-radius: 4px;
}
body {
  background: #F4F5F6;
}
<div class="mapTop">
</div>

在所有其他浏览器中，它看起来像这样： https ://i.stack.imgur.com/394Pt.png

但在 Safari 中，它看起来像这样： https ://i.stack.imgur.com/IUYaC.png

这是为什么？

标签： htmlcsssafarilinear-gradients

解决方案

根据我在 CSS-Tricks 上阅读的内容，Safari 将渐变背景中的透明解释为“透明黑色”。这是链接：https ://css-tricks.com/thing-know-gradients-transparent-black/

所以，只需使用：

.mapTop {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0)), to(#fff));
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0), #fff);
    background-image: linear-gradient(to top, rgba(255,255,255,0), #fff);
}

我还为它添加了自动前缀，因此它与所有浏览器兼容（IE 除外）

推荐阅读