html中菜单触碰变色,利用css filter实现菜单图片变色效果

需求场景

在制作菜单时，未增加响应效果，往往会加入鼠标移入移出时字体和图标进行变色的效果，字体的颜色变化比较好控制，通过color便可以设置，但如果图标是使用的图片，往往要一个图标制作两份不同颜色的图片，还需要javascript代码进行动态替换，比较繁琐。所以在项目中我们寻求一种比较简单、易于需求变更后进行维护的方式。

使用css filter进行实现

准备图片

假设我们的原始图片主色调为 #1296DB

制作一个简单的无背景色的横向菜单

为菜单添加背景(大多菜单栏都会有背景)

ul.horMenu {

list-style: none;

margin: 0;

padding: 0;

background-color: #5C9CCC;

}

ul.horMenu > li {

display: inline-block;

height: 32px;

padding: 0 8px;

line-height: 32px;

cursor: pointer;

}

ul.horMenu > li > img {

height: 32px;

width: 32px;

padding: 8px;

box-sizing: border-box;

display: inline-block;

vertical-align: top;

}

ul.horMenu > li > span {

color: white;

display: inline-block;

vertical-align: top;

}

效果图：

此时，我们的图片已经与背景搭配的不是那么协调。

通过css filter改变图片颜色为白色主要通过filter: brightness(100);语句：

ul.horMenu > li > img {

height: 32px;

width: 32px;

padding: 8px;

box-sizing: border-box;

display: inline-block;

vertical-align: top;

filter: brightness(100);

}

之后菜单效果为：

添加菜单移入移出效果，鼠标移入背景变为浅色，字体和图标变为#1296DB

ul.horMenu > li:hover {

background-color: #E6F7FF;

}

ul.horMenu > li:hover img {

filter: brightness(0);

filter: grayscale(0);

}

ul.horMenu > li:hover > span {

color: #1296DB;

}

图片部分主要是搭配使用：filter: brightness(0); filter: grayscale(0);

最终效果：

注意：filter属性在老旧IE浏览器下并为得到很好的支持，因此使用时一定要注意。

html中菜单触碰变色,利用css filter实现菜单图片变色效果相关推荐

前端开发者如何利用 CSS 实现酷炫的变色方案？
作者 | 小胡责编 | 郭芮说到图片处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover ...
[Unity学习笔记]2D游戏中的触碰/OnMouseDown
[Unity学习笔记]2D游戏中的触碰/OnMouseDown 这种情况多用于2D游戏的触屏 1.给2D游戏对象加上collider 2D,让其能够被检测到
转：人际交往过程中不能触碰的18条铁律
个人理解: 不要等明天交不上差再找借口,今天就要找好. 世上70%的烦恼由沟通不畅所致. 自负是大自然对自卑的补偿. 只要你不认为自己吃了亏,别人也就一定没占着便宜. 人际交往过程中不能触碰的18条铁 ...
html用css完成动画效果图,利用CSS Sprite实现PNG图片动画
利用CSS Sprite实现PNG图片动画 12月 6, 2012 评论 (6) Sponsor 如题,今天将会和大家讲解如何利用CSS Sprite(CSS雪碧)来实现PNG图片动画,就像GIF一样 ...
用CSS Filter 可以实现相同的效果
用CSS Filter 可以实现相同的效果,而且可以省去图片,代码如下: <table width="100%" height="133" border ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
[CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover; object-fit 属性 objec ...
网站运营过程中经常触碰的几大误区
网站建设也不是一件容易的事,需要网站运营者有敏锐的市场观察力,建设成功后也不是放置不动就可以了,关于网站建设和运营过程中经常容易触碰的几个误区来总结一下: 1.只关心价格的高低,不注重质量的好坏随着 ...
html下拉菜单原理,HTML5 教程之CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单实例演示 2 下拉菜单实例演示 3 基本下拉菜单当鼠标移动到指定元素上时,会出 ...

html中菜单触碰变色,利用css filter实现菜单图片变色效果

html中菜单触碰变色,利用css filter实现菜单图片变色效果相关推荐

最新文章

热门文章