为每边添加多个 webkit-gradient

Question

所以我有这个 css 代码：

img {
-webkit-mask-image: -webkit-gradient(linear, left 65%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}

它使我的 img 底部在背景中淡出，具有透明度。但是，我想在每一边都这样做。有办法吗

感谢您的帮助

Answer 1

我认为这只适用于 Chrome 和 Safari，但您可以执行以下操作：

img{
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0))), -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
  -webkit-mask-composite: source-out;
}

这使用两个（逗号分隔）渐变，它们具有多个 color-stop() 而不仅仅是 from() 和 to()。我不完全知道为什么 -webkit-mask-composite: source-out 与第二个渐变的组合在第二个渐变中使用相反的不透明度值。我只是碰巧注意到它在玩 -webkit-mask-composite.

的不同值时确实如此

Here is a fiddle

为每边添加多个 webkit-gradient

add multiple webkit-gradient for every side

html

css

transparency

webkit