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图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
随机推荐
- GO开发[一]:golang开发初探
一.Golang的安装 1.https://dl.gocn.io/ (国内下载地址) 2.https://golang.org/dl/ (国外下载地址) 3.现在studygolang中文网也可以了h ...
- tomcat、weblogic、jboss的区别,容器的作用
一.tomcat Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,它是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心 ...
- 解决html文件的DropFileName = "svchost.exe"木马
首先表示强烈谴责,没事写出这种木马来.导致开发者把时间花在解决这种问题上. 这种木马会在你全盘的html文件的最底部生成一堆vbscript代码,导致html文件变得很大.大概213kb.可以看出他就 ...
- 【CentOS】php编译安装gd库
一.准备工作 使用之前服务器按源码最小化安装完nginx.php-fpm,没有安装gd库,下面介绍下gd库的安装. gd库是一个开源的图像处理库,它通过提供一系列用来处理图片的API,使其可以用来创建 ...
- 任务调度框架Quartz原理简介
[TOC] 第一章 Quartz 1.1 Quartz概念 Quartz是OpenSymphony开源组织的一个Java开源项目, 在2009被Terracotta收购.Quartz官网 1.2 Qu ...
- 关于mybatis-generator的问题
1.运行完mybatis-generator没有出现问题,但是代码看不到,出现这种东西: 你需要使用相对路径,如项目名+/src/main/java,就可以解决了 2.附录我的代码以供参考: < ...
- Android基础_Service
一.service的用途 1.1 一种是执行长时间运行的耗时操做 1.如网络下载.音乐播放2.文件系统监控等 1.2 另一种是负责组件间的交互 1.将某些功能以Service组件形式封装,然后提供给其 ...
- 【JavaScript for循环实例】
1.大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? //驮100石粮食,大马需要50匹 for(var a=0;a<=50;a++){ //驮1 ...
- cs231n spring 2017 lecture11 Detection and Segmentation 听课笔记
1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种"Unpooling"." ...
- Codeforces Round #331 (Div. 2) _A. Wilbur and Swimming Pool
A. Wilbur and Swimming Pool time limit per test 1 second memory limit per test 256 megabytes input s ...