我需要用蒙版创建一个“穿孔”效果。 mask 和打洞都需要应用 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);
径向渐变不需要 Angular 。只需删除 45deg
关于css - 为什么这种具有透明度的径向渐变在 Firefox 而不是 Chrome 中有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27038564/