很久很久以前,在一个项目中,经理要求对一个图片做模糊处理。第一反应是这个要找 ui 给个模糊图片。可当时 ui 不在呀,项目又着急,只能自己搞。我一个前端,ps 技术实在不咋的,叫我切切图还可以,叫我做个模糊,还要什么高斯模糊的。虽然最后做出来了,但感觉总是不太好。

  后来,不记得在哪看到用 css 也可以对图片做这样的处理,就做了些研究。

  原图:

      

  模糊:

      

  灰度:

      

  反色:

      

  亮度:

      

  褐色:

      

  饱和度:

      

  色相旋转:

       

  对比度:

      

  这些只是其中的一点效果,这里就不全部展示了 。

  这里是我写的比较全的效果:https://18219304774.github.io/imgcolor/

  这里是原码的 github 地址 :https://github.com/18219304774/imgcolor

  感兴趣的可以看看。

css 对图片颜色的处理的更多相关文章

  1. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  2. 纯css更改图片颜色的技巧

    tips: JPG.PNG.GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色 .pic1 {     background-image: url($img), linear-gradient ...

  3. Gradify - 提取图片颜色,创建响应式的 CSS渐变

    被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...

  4. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  5. PHP 简易读取文件目录下的文件,生成css spirte图片

    因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...

  6. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  7. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  8. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  9. 学习笔记 第六章 使用CSS美化图片

    第六章  使用CSS美化图片 6.1  在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...

随机推荐

  1. 编写OC高质量的代码的有效方法

    1. 写这个只是为了自己记忆,有相关pdf文件,如需要留下邮箱.. 2. 在类的头文件中尽量少引入其他头文件 除非确有必要,否则不要引入头文件.一般来说,应在某个类的头文件中使用向前声明来提及别的类( ...

  2. 【转载】MySQL之权限管理

    一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连接m ...

  3. Zabbix实战-简易教程--技巧一(操作类技巧)

    一.常用操作技巧 1.克隆 监控项.模板.触发器都可以进行克隆.其中,模板克隆又分为克隆和完全克隆.完全克隆会将LLD也一起复制一份,就是和之前的模板一模一样,而模板的克隆只是克隆监控项,不复制低层次 ...

  4. 降维之pca算法

    pca算法: 算法原理: pca利用的两个维度之间的关系和协方差成正比,协方差为0时,表示这两个维度无关,如果协方差越大这表明两个维度之间相关性越大,因而降维的时候, 都是找协方差最大的. 将XX中的 ...

  5. js和native交互方法浅析

    一.背景 最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路. 二.解决方案之WebViewJavascriptBridge 想要和app交互,必须在app上先把bridge进 ...

  6. BZOJ 3668: [Noi2014]起床困难综合症【贪心】

    3668: [Noi2014]起床困难综合症 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 2326  Solved: 1305[Submit][St ...

  7. HDU 1248 寒冰王座(完全背包裸题)

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  8. noi 2016 游记

    先挖个坑..这回大概不会太监吧(大雾 day -2 下午起飞的飞机,晚上到了成都..把东西扔到旅馆后就组队外出觅食了... 街上人不多,逛了半天才发现一家卖本地小吃的小店. KPM:诶诶给我来碗酸辣粉 ...

  9. Android Studio解决导入项目非常慢的问题

    http://www.androidchina.net/5527.html Android Studio比Eclipse ADT有巨大的优势. Android Studio原生支持使用Gradle来构 ...

  10. TCP为什么需要3次握手与4次挥手(转载)

    为什么需要“三次握手” 在谢希仁著<计算机网络>第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”.在另一部经典的<计算机网络> ...