背景：最近，在寫前端頁面的過程中，遇到一個情景，需要在深色背景下放置一個logo，但是拿到的素材只有又一個深色的logo，放上去之后，logo背景糊在了一起，無法直視。

如下圖：

我們可以使用 css 的 filter 對圖片進行處理，show you my code ~

首先，使用 filter: drop-shadow(0px 150px 0px white); 對圖片進行處理，效果如下：

可以看到，白色的icon正是我們想要的效果。但是位置好像不太對，沒關系，我們可以利用 css3 的 transform 對圖片進行變換。
我們使用 transform: translateY(-150px); 對圖片進行位置變換，效果如下：

可以看到圖片在垂直方向上偏移了，稍加調整，白色logo就到我們想要的位置。
但是，原本的深色logo還在頁面上，沒事，我們對父級使用 overflow: hidden; 對超出的部分進行隱藏，就完美達到我們想要的效果了。

以下是完整的代碼：

<div p-10px mb-20px class="logo"><img w-350px src="~/assets/images/nav/logo.png"> </div> .logo {overflow: hidden;img {filter: drop-shadow(0px 150px 0px white);transform: translateY(-150px);} }

希望本文能給你帶來幫助或啟發。

總結

以上是生活随笔為你收集整理的【CSS奇技淫巧】filter drop-shadow 的妙用——处理深色logo适配深色背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。