背景:最近,在写前端页面的过程中,遇到一个情景,需要在深色背景下放置一个logo,但是拿到的素材只有又一个深色的logo,放上去之后,logo背景糊在了一起,无法直视。
如下图:
我们可以使用 css
的 filter
对图片进行处理,show you my code ~
首先,使用 filter: drop-shadow(0px 150px 0px white);
对图片进行处理,效果如下:
可以看到,白色的icon正是我们想要的效果。但是位置好像不太对,没关系,我们可以利用 css3
的 transform
对图片进行变换。
我们使用 transform: translateY(-150px);
对图片进行位置变换,效果如下:
可以看到图片在垂直方向上偏移了,稍加调整,白色logo就到我们想要的位置。
但是,