css 对图片颜色的处理
很久很久以前,在一个项目中,经理要求对一个图片做模糊处理。第一反应是这个要找 ui 给个模糊图片。可当时 ui 不在呀,项目又着急,只能自己搞。我一个前端,ps 技术实在不咋的,叫我切切图还可以,叫我做个模糊,还要什么高斯模糊的。虽然最后做出来了,但感觉总是不太好。
后来,不记得在哪看到用 css 也可以对图片做这样的处理,就做了些研究。
原图:
模糊:
灰度:
反色:
亮度:
褐色:
饱和度:
色相旋转:
对比度:
这些只是其中的一点效果,这里就不全部展示了 。
这里是我写的比较全的效果:https://18219304774.github.io/imgcolor/
这里是原码的 github 地址 :https://github.com/18219304774/imgcolor
感兴趣的可以看看。
css 对图片颜色的处理的更多相关文章
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 纯css更改图片颜色的技巧
tips: JPG.PNG.GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色 .pic1 { background-image: url($img), linear-gradient ...
- Gradify - 提取图片颜色,创建响应式的 CSS渐变
被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- PHP 简易读取文件目录下的文件,生成css spirte图片
因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- CSS 实现图片灰度效果
非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
- 学习笔记 第六章 使用CSS美化图片
第六章 使用CSS美化图片 6.1 在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
随机推荐
- Centos7(Linux)网络配置,自动获取ip地址
Centos7.0 Vmware 网络桥接配置,利用DHCP自动获取ip地址 首先要将Vmware10.0.3设置为桥接模式. CentOS 7.0默认安装好之后是没有自动开启网络连接的! cd / ...
- python之pyqt4的简单窗口布局以及信号和槽(上代码)
#-*- coding: utf-8 -*- import sys reload(sys) sys.setdefaultencoding('utf8') from PyQt4 import QtGui ...
- 基于input子系统的sensor驱动调试(二)
继上一篇:http://www.cnblogs.com/linhaostudy/p/8303628.html#_label1_1 一.驱动流程解析: 1.模块加载: static struct of_ ...
- Grafana最新版本4.3.1安装(后端使用mysql)
环境 CentOS release 6.5 (Final) 64bitzabbix_server (Zabbix) 3.0.3 grafana-4.3.1mysql-5.6.21 一.安装grafan ...
- CCNA笔记(3)
网络类型 1,局域网 在一定范围的网络连接,只允许内部人员使用 2城域网 一个城市的网络连接在一起 3.广域网 一个省或者一个市的网络 所有的局域网加上广域网就是互联网
- Open Judge 2750 鸡兔同笼
2750:鸡兔同笼 ...
- CodeForces832-B. Petya and Exam
补的若干年以前的题目,水题,太菜啦_(:з」∠)_ B. Petya and Exam time limit per test 2 seconds memory limit per test 2 ...
- BZOJ3529: [Sdoi2014]数表
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3529 挺恶心的数论TAT... 设f[i]是i的约数和,这个可以nln(n)扫出来. ans= ...
- UE4 Pure函数的特点
蓝图里的Pure函数跟正常函数的区别是:Pure函数在它连接到的正常函数执行的时候才执行,正常函数按照连接的顺序执行. Pure函数不会改变游戏中其他的变量,所以getter和其他一些纯计算的函数一般 ...
- 一个域名最多能对应几个IP地址?,一个IP地址可以绑定几个域名?
一个域名最多能对应几个IP地址?,一个IP地址可以绑定几个域名?谢谢 xikeboy | 浏览 31055 次 推荐于2016-04-24 14:21:14 最佳答案 1.也就是说通常情况下一个域名同 ...