Почему этот радиальный градиент с прозрачностью работает в Firefox, а не в Chrome?

Мне нужно создать эффект «перфорации» с помощью маски. И маска, и перфорация требуют применения альфа-прозрачности.

Здесь он отлично работает в Firefox, но не в Chrome: http://codepen.io/anon/pen/WbbXKP< /а>

Что я делаю не так?

CSS:

body {
  margin: 0;
  padding: 0;
}

.pizza {
    background: url(http://lorempizza.com/900/900/) center;
    position:absolute;
  width: 100%;
    height: 100%;
}

.overlay {
  top: 0;
  left: 0;
  opacity: .9;
  position: absolute;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(50% 50% 45deg, circle cover, rgba(0,0,0,.8) 150px, rgba(0,0,0,1) 150px);
  background: -webkit-radial-gradient(50% 50% 45deg, circle cover, rgba(0,0,0,.8) 150px, rgba(0,0,0,1) 150px);
  background: -webkit-gradient(radial, 50% 50% 45deg, circle cover, rgba(0,0,0,.8) 150px, rgba(0,0,0,1) 150px);
}

HTML

<div class="pizza"></div>
<div class="overlay"></div>

google-chrome css radial-gradients
person Saldog    schedule 20.11.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пожалуйста, попробуй

background: -webkit-radial-gradient(50% 50%, circle cover,rgba(0,0,0,.8) 150px,rgba(0,0,0,1) 150px);

Угол не нужен для радиального градиента. Просто удалите 45deg

person belykh    schedule 20.11.2014
comment
Это было автоматически помечено как низкое качество. Возможно, вам следует добавить какое-то объяснение того, что именно делает ваш код, или ваш ответ может быть удален сообществом. - person nalply; 20.11.2014