很久很久以前,在一个项目中,经理要求对一个图片做模糊处理。第一反应是这个要找 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. 如何将VS 2015中的项目上传到github

    最近开始慢慢接触github,现在希望将自己平时写的小程序,上传到github上,以便以后有个参考,在遇到同样问题的时候不至于想不起来怎么做而到处找别人的例子. VS 2015设置 首先下载跟gith ...

  2. CentOS环境下tomcat启动超级慢的解决方案

    在本地开发环境,应用正常启动. 在CentOS测试环境,应用启动速度也是正常的. 但是在阿里云的生产环境,tomcat启动超级慢,并且在最终打印出来以下内容: org.apache.catalina. ...

  3. 简易安卓APP

    简介 现在来分享期末做的安卓大作业--生活百科. 本项目只是单纯的一个大作业,没有考虑实际的需求,所以有设计不合理的地方,请见谅. 这个项目有三大功能(因为是使用了侧边栏所以是可以继续往里面添加功能的 ...

  4. Vue + iView + vuex + vee-validate 完整项目总结

    build/*.js config/*.js src/旧代码文件夹 部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都 ...

  5. Django--权限组件

    创建组件 需求分析: 创建独立app, rbac ##注意: app创建后需要注册到setting.py中 INSTALLED_APPS = [ 'django.contrib.admin', 'dj ...

  6. Python 集合 深浅copy

    一,集合. 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...

  7. python2与python3的区别 ,小数据池 bytes 类型

    一.python2和3的区别 在python3中 在python2中 print('ab')方式打印内容()括号是必须要有的.   print 'ab' 可以加可以不加. 只有range   有ran ...

  8. 在做vue计算属性,v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  9. BZOJ2282: [Sdoi2011]消防

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2282 答案一定是在直径上的一段,然后答案一定不会小于不在直径上的点到直径的距离(要是可以的话那 ...

  10. ImportError: No module named 'BaseHTTPServer':解决方案

    利用python写了一小段代码,里面使用到了Python标准库的BaseHTTPServer来构建一个基础HTTP服务器: 1 #-*- coding:utf-8 -*- 2 import http. ...