CSS奇技淫巧filter drop-shadow 的妙用——处理深色logo适配深色背景
背景:最近,在写前端页面的过程中,遇到一个情景,需要在深色背景下放置一个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);
}
}
希望本文能给你带来帮助或启发。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhagihc
系列文章
更多
-
Error in na.fail.default(list(Purchase = c(“CH“, “CH“, “CH“, “MM“, “CH“, : missing values in obj
-
[CTF] python的pip源更改和常用python库
-
LLaMA-2进行微调的FreeWilly2开源语言模型
-
首次vue加载页面,请求两个接口,后者接口需要依赖前者接口的数据去请求接口。
-
MobaXterm 连接服务器过指定连接数量默认14个Warning: you have reached the maximum number of saved sessions for the
-
C# excel的数据导入到数据库 数据库数据导出excel
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11