Линейный градиент не показывает правильный цвет в Safari - PullRequest
Новая
       18

Линейный градиент не показывает правильный цвет в Safari

0 голосов
/ 28 октября 2019

У меня есть <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

Но в сафари это выглядит так: https://i.stack.imgur.com/IUYaC.png

Почему это?

1 Ответ

0 голосов
/ 28 октября 2019

Согласно тому, что я прочитал на CSS-хитрости, Safari интерпретирует прозрачный на градиентных фонах как «прозрачный черный». Вот ссылка: https://css -tricks.com / thing-know-градиенты-прозрачно-черный /

Итак, просто используйте: 

.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);
}

IКроме того, он автоматически имеет префикс, так что он совместим со всеми браузерами (кроме IE)

...