-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. C#下的摄像机标定

    前言:计算机视觉的基本任务之一是从摄像机获取的图像信息出发计算三维空间中物体的几何信息,并由此重建和识别物体,而空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系是由摄像机成像的几何模型决 ...

  2. python 基础 9.0 安装MySQL-python-1.2.5客户端

    一. 安装客户端     python 标准数据库接口为Python DB-API,Python DB-API 为开发人员提供了数据应用编程接口.参考地址:https://wiki.python.or ...

  3. @Bean 和@ Component的区别

    @Component auto detects and configures the beans using classpath scanning whereas @Bean explicitly d ...

  4. 九度OJ 1047：素数判定 （素数）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:9583 解决:4347 题目描述: 给定一个数n,要求判断其是否为素数(0,1,负数都是非素数). 输入: 测试数据有多组,每组输入一个数n ...

  5. 在java项目中使用protobuf

    1 通用方式 第一步,定义数据结构 第二步,使用protoc.exe生成java代码 第三步,序列化 第四步,反序列化 2 grpc方式 grpc官方推荐的方式,通过maven插件来生成java代码. ...

  6. There are two different types of export, named and default

    export - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statemen ...

  7. combination_m_n

    def combination_2_n(l): n, r = len(l), [] for i in range(0, n, 1): s = i + 1 for ii in range(s, n, 1 ...

  8. ajax实时获取下拉数据

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax ...

  9. 关于button的自动刷新

    今天在开发中遇到了ajax传数据到后台,处理结果正常,返回的resultMap是一个Map<String,Object>类型,但是返回时显示'Fail to load response d ...

  10. apace搭建站点

    Listen 127.0.0.1:3310<VirtualHost *:3306> ServerName 127.0.0.1:3306 DocumentRoot "F:/Baid ...