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() s而不仅仅是from()和to()。我并不确切知道为什么-webkit-mask-composite: source-out与第二个渐变的组合在第二个渐变中使用相反的不透明度值。我碰巧注意到它在播放-webkit-mask-composite的不同值时会发生这种情况。

Here is a fiddle

为每一方添加多个webkit-gradient

1 个答案: