很久很久以前,在一个项目中,经理要求对一个图片做模糊处理。第一反应是这个要找 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. 关于S/4HANA里Sales Office 和Sales Organization那些事儿

    今天这篇文章来自我的成都同事Zhang Sean(张正永). Sean也是一位在SAP行业摸爬滚打多年的老兵了,2009年从大学硕士毕业之后就进入了SAP Labs从事开发工作,目前是SAP 成都S/ ...

  2. AdaBoost入门

    写一点自己理解的AdaBoost,然后再贴上面试过程中被问到的相关问题.按照以下目录展开. 当然,也可以去我的博客上看 Boosting提升算法 AdaBoost 原理理解 实例 算法流程 公式推导 ...

  3. for循环相关的一个问题

    首先,我在for循环外定义了两个变量. //在4条直线方向,获取预置点两端的8个点的棋盘信息 ,r=,c=;//step代表直线,r,c分别代表加上偏移量之后的坐标 ,myCount=,hisCoun ...

  4. 一步一步从原理跟我学邮件收取及发送 2.邮箱的登录和绕不开的base64

    一步一步从原理跟我学邮件收取及发送 2.邮箱的登录和绕不开的base64 好了,经过本系列上一篇文章 "1.网络命令的发送",假设大家已经掌握了 email 电子邮件的命令发送的方 ...

  5. linux下的外网木马前期要的工具

    这周看了demon哥的博客弄msf外网马,自己试了一下 首先去ngrok官网下载对应的系统版本,如果对应下载那个标签是绿色的(这里不支持windows) 下载好后在linux提取出来 让我们来看看他的 ...

  6. linux(八)linux系统中查找文件二

    前面介绍的是find命令,我们发现一个find命令居然有那么多的命令,我看到都要晕了,不管没有关系,加油.相信自己! 一.grep命令 1.1.作用 Linux系统中grep命令是一种强大的文本搜索工 ...

  7. 2329: [HNOI2011]括号修复

    传送魔法 一开始以为可以直接线段树的,好像还是不行……还是得用Spaly,然后就没啥了. #include<cstdio> #include<algorithm> #defin ...

  8. BZOJ:4209: 西瓜王

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4209 (虽然仅仅是看在名字的份上,我们还是得说这题是一道) 绝世好题!西瓜王!西瓜王!西瓜 ...

  9. 蓝桥杯模拟赛-引爆炸弹-DFS+并查集

    今天整理电脑,翻出来了很久以前大佬给的题,贴一下. 引爆炸弹 1000ms 在一个 n×m的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上的所有炸弹引爆,被引爆的炸 ...

  10. LCS最长公共子序列~dp学习~4

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1513 Palindrome Time Limit: 4000/2000 MS (Java/Others ...