-webkit-filter: grayscale(%);

-moz-filter: grayscale(%);

-ms-filter: grayscale(%);

-o-filter: grayscale(%);

filter: grayscale(%);

filter: gray;

给图片加上这个css样式即可

css使图片变成黑白效果的更多相关文章

  1. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

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

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

  3. CSS grayscale滤镜+SVG使图片变黑白实例页面

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...

  4. html+css使图片在页面中循环滚动

    我们先通过html创建一个div盒子的框架,方便后续以及实际使用中调整位置. <!DOCTYPE html> <html> <head> <meta char ...

  5. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  6. CSS3 grayscale滤镜+SVG使图片变黑白实例页面

    CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...

  7. 用CSS使图片上下左右都绝对居中于DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css 使图片紧贴底部显示

    img{ display: table-cell; vertical-align: bottom; }

  9. 利用CSS的translate属性或利用CSS实现图片居中的效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Windows系统下正确安装MongoDB

    1.下载.安装 官网下载: http://www.mongodb.org/downloads 下载好之后,接下来进行安装了: 2.创建数据文件夹 MongoDB将数据文件夹存储在 db 文件夹下. 可 ...

  2. Android开发：LocationManager获取经纬度及定位过程（附demo）

    在Android开发其中.常常须要用到定位功能,尤其是依赖于地理位置功能的应用.非常多人喜欢使用百度地图,高德地图提供的sdk.开放API,可是在只须要经纬度,或者城市,街道地址等信息.并不须要提供预 ...

  3. linux jdk 安装另一种方法

    linux 7.2 安装 jdk方法: (1). 以root用户登录linux系统, 应用Xmanager把文件拷贝到linux 系统的根目录. (2). 进入opt/software建立jvm文件夹 ...

  4. python classmethod方法 和 staticmethod

    classmethod() 是一个类方法,用来装饰对应的函数.被classmethod 装饰之后就无需实例化,也不需要在函数中传self,但是被装饰的函数第一个参数需要是cls来表示自身类.可以用来调 ...

  5. Eclipse + JDK + tomcat开发环境配置

       第一步:下载jdk和tomcat:JDK下载  Tomcat下载     最新的jdk为1.6.10,tomcat为6.0,建议jdk1.4以上,tomcat4.0以上    第二步:安装和配置 ...

  6. Grunt 学习笔记【1】----基础知识

    题记:虽然现在大家都在推Webpack,无奈业务需要,因此研究下Grunt. 说明:本文是基于Grunt 0.4.5版本. 一 说明 为何要用构建工具? 一句话:自动化.对于需要反复重复的任务,例如压 ...

  7. 错误: 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum

    解决方案,把文件用Editplus打开,UTF-8+BOM编码的文件转为普通的UTF-8文件

  8. nokogiri

    Nokogiri的用法我推荐三篇非常给力的文章:http://ruby.bastardsbook.com/chapters/html-parsing/http://ruby.bastardsbook. ...

  9. [BZOJ4557][JLOI2016]侦查守卫

    4557: [JLoi2016]侦察守卫 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 297  Solved: 200[Submit][Status ...

  10. LightOJ 1132 Summing up Powers：矩阵快速幂 + 二项式定理

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1132 题意: 给定n.k,求(1K + 2K + 3K + ... + NK) % 2 ...