-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. Android中怎样控制LogCat的自己定义输出

    在Android开发中,LogCat是一个非常重要的调试工具,能够输出非常多关于项目或者手机的信息. 可是正是因为LogCat功能的过于强大,输出的信息量也是极为庞大的,那么我们就须要通过一定的方式依 ...

  2. Little-endian和Big-endian模式

    这段C程序的结果是多少? 嵌入式系统开发者应该对Little-endian和Big-endian模式非常了解.采用Little-endian模式的CPU对操作数的存放方式是从低字节到高字节,而Big- ...

  3. DNS--域名系统 随笔

    定义:是一种用于TCP/IP应用程序的分布式数据库.(分布式数据库:指利用高速计算机网络将物理上分散的多个数据存储单元连接起来组成一个逻辑上统一的数据库.分布式数据库的基本思想是将原来集中式数据库中的 ...

  4. php xmlrpc使用示例

    xmlrpc 远程过程调用, 使用xml文本方式传输数据. soap协议比xmlrpc复杂并强大. 1.修改 php.ini,开启 xmlrpc 扩展 2.rpc_client.php <?ph ...

  5. 利用wrapper注冊的 java服务起动超时的解决方法

    使用Java Service Wrapper能够把java程序注冊为一个系统服务,可是在启动服务的某些情况下会抛出例如以下错误: ERROR  | wrapper  | 2014/06/11 08:4 ...

  6. 搭建vps***

    快速搭建ShadowSocks wget --no-check-certificate -O shadowsocks.sh https://raw.githubusercontent.com/tedd ...

  7. Linux PPTP拨号

    试验环境:Linux marsboard 3.4.90 #9 SMP PREEMPT Thu Mar 3 18:28:43 CST 2016 armv7l armv7l armv7l GNU/Linu ...

  8. Javascript代码收集

    1.模仿jquery each 原文地址 function each(obj, fn){ var i; if(Object.prototype.toString.call(obj) === '[obj ...

  9. Python的pymysql模块

    PyMySQL是在Python3.x版本中用于连接MySQL服务器的一个库,Python2中则使用MySQLDB. 1.基本语法 # 导入pymysql模块 import pymysql # 连接da ...

  10. Java for LeetCode 113 Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...