css - 为什么此具有透明性的径向渐变在Firefox中而不在Chrome中有效？

我需要使用蒙版创建“穿孔”效果。遮罩和打孔都需要应用Alpha透明度。

它在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>

最佳答案

请试试

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

径向渐变不需要该角度。只需删除45deg

关于css - 为什么此具有透明性的径向渐变在Firefox中而不在Chrome中有效？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27038564/