html图片颜色加深,CSS教程:图片使用混合模式和颜色叠加filter滤镜,改变PNG图标颜色...
目前很多网站使用PNG来做图标,那么能否通过CSS更改其颜色? 从而适应不同的网站风格?
混合模式
css3添加了两个与混合模式相关的属性: mix-blend-mode,background-blend-mode
这种方法的基本原理是将图片和背景颜色混合,从而变成新的颜色。
CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。大致和ps中一致:
= normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
normal; // 正常
multiply; // 正片叠底
screen; // 滤色
overlay; // 叠加
darken; // 变暗
lighten; // 变亮
color-dodge; // 颜色减淡
color-burn; // 颜色加深
hard-light; // 强光
soft-light; // 柔光
difference; // 差值
exclusion; // 排除
hue; // 色相
saturation; // 饱和度
color; // 颜色
luminosity; // 亮度
混合模式缺陷
当图标背景是透明的PNG图片时,底色会显示出来,而我们其实只想改变图标有颜色的部分。#div {
width: 300px;
height: 300px;
background: url(/file/view/ourjs/image/css-png-color-0.png) #f00;
background-blend-mode: lighten;
}
原始图片:
在线示例: https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-blend-mod
filter过滤
blend-mode和浏览器兼容和实际效果其实并不好,此时可使用更加强大的filter,一行CSS就可改造图片颜色的色相、饱和度、对比度等,原理类似PS中的滤镜。
#demo img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
效果
效果如下,其实更多时侯,我们可能只是需要灰度或彩色模式。鼠标悬浮可看到应用的filter属性。
参考:
https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css
html图片颜色加深,CSS教程:图片使用混合模式和颜色叠加filter滤镜,改变PNG图标颜色...相关推荐
- 积跬步,聚小流------ps有用小技巧,改变png图标颜色
积跬步,聚小流------ps有用小技巧,改变png图标颜色 * 实现效果: 原图: 改动后: * 实现目的: 满足为实现不同界面色彩搭配改动png图标的颜色 * 实现方法: 1.打开Phot ...
- html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
- html如何让文字图片同高,css里图片和文字如何等高
css里设置图片和文字等高的方法:1.添加css属性"vertical-align:middle;":2.将图片和文字分别套上一个div,然后利用margin属性实现图片和文字等高 ...
- html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
- html悬浮的图片居中,HTML/CSS:图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
- css图片过大,CSS解决图片过大撑破DIV的方法
一.防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩 ...
- html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
- html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容 此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...
- html 设置图片左对齐,CSS设置图片的对齐
CSS设置图片的对齐 横向对齐方式 图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...
最新文章
- 苹果地图副总裁_也许,苹果汽车的到来只是早晚问题
- 【swift学习笔记】二.页面转跳数据回传
- python家的杨辉三角
- 创建Invoice和公司间Invoice
- 只会使用 WaitGroup?你应该学习下 ErrGroup!
- B端产品中,Web端表单如何设计
- mysql主从复制原理详解_简述 MySQL 逻辑架构与主从复制原理。
- 2014蓝桥杯C++A:猜年龄;扑克序列(全排列)
- 浅谈Eclipse dropins插件安装的坑(附m2e的各个版本插件下载)
- linux下tar命令压缩/解压缩.tar/.gz/.bz2文件、分卷压缩
- http://bt.neu6.edu.cn/forum.php,分享一些教育网访问较快的站点~
- 各种hadoop原理图
- iradon函数和radon函数
- Postgis使用工具raster2pgsql批量导入栅格数据(一)
- 查询快递单号物流,筛选从某地发出的单号
- 万丈高楼平地起,基础很重要
- DAP可视化组件升级开发说明
- 汽车功能安全标准ISO 26262导入实践(下)
- 排列组合———求一串数字可以有多少种不同的组合
- 工作中常用的前端知识总结
热门文章
- 用 .NET 启动你的 大疆 Ryze Tello 无人机
- 键盘哪个键是锁定计算机,键盘快捷键关闭或锁定Windows计算机 | MOS86
- 几何与向量方法推导两角和差公式
- 香港汇丰银行开户的个人条件是什么
- 《软件架构设计》一书目录
- java工作日报管理系统_GitHub - LovebuildJ/book-manager: JavaWeb图书管理系统,简单易用功能强大,可拓展性高,集成主流框架...
- 阿里巴巴马云:CEO的本事就是会用别人脑袋
- 在MacOS安装nvm
- 外骨骼机器人:左手医疗,右手工业
- ssm时装秀服装在线购物商城管理系统