• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

CSS奇技淫巧filter drop-shadow 的妙用——处理深色logo适配深色背景

武飞扬头像
Erdon_Jia_N
帮助1

背景:最近,在写前端页面的过程中,遇到一个情景,需要在深色背景下放置一个logo,但是拿到的素材只有又一个深色的logo,放上去之后,logo背景糊在了一起,无法直视。

如下图:

学新通

我们可以使用 cssfilter 对图片进行处理,show you my code ~

首先,使用 filter: drop-shadow(0px 150px 0px white); 对图片进行处理,效果如下:

学新通

可以看到,白色的icon正是我们想要的效果。但是位置好像不太对,没关系,我们可以利用 css3transform 对图片进行变换。
我们使用 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);
  }
}

希望本文能给你带来帮助或启发。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhagihc
系列文章
更多 icon
同类精品
更多 icon
继续加载