【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);}
}

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

【CSS奇技淫巧】filter drop-shadow 的妙用——处理深色logo适配深色背景相关推荐

Css的filter常用滤波器属性及语句大全
Css的filter常用滤波器属性及语句大全语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filterna ...
用CSS的 filter 来轻松实现图层半透明
用CSS的 filter 来轻松实现Div半透明 .Demo{ background:#000; background:rgba(0,0,0,0.6); filter:alpha(opacity=40 ...
css 的 filter:grayscale 哀悼模式
页面整体黑白一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么今天小编就说说 ...
html滤镜无效果,为什么css滤镜(filter属性)没用？
为什么css滤镜(filter属性)没用?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 滤镜filter属性,可以对网页中的图片进行类似Photosho ...
css多重效果,css奇技淫巧—box-shadow与outline绘制多重边框效果
css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...
CSS 奇技淫巧 | 巧妙实现文本不定行数截断
Hello,大家好,我是 Coco,今天又是一篇 CSS 的奇技淫巧.由阅文前端 XboxYan 投稿,授权原创转发.原文地址:https://juejin.cn/post/7022876094608 ...
CSS 奇技淫巧Box-shadow实现圆环进度条
CSS 奇技淫巧Box-shadow实现圆环进度条文章目录 CSS 奇技淫巧Box-shadow实现圆环进度条一.Box-shadow圆环进度条二.效果预览三.原理刨析四.实际应用五.总结 ...
css透明饱和度,css中filter:alpha透明度使用
css中filter:alpha透明度使用使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大 ...
JavaScript|你不知道的CSS属性-Filter（滤镜）
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述当在拍照.p图时,有一个东西必不可少那就是滤镜,适当 ...

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

【CSS奇技淫巧】filter drop-shadow 的妙用——处理深色logo适配深色背景相关推荐

最新文章

热门文章