-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. MyBatis缓存介绍

    一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 相同提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存.其存储作用域为 Se ...

  2. visual C++ & Makefile

    Makefile说明: visual c++ 不通过IDE有3中方式对工程进行编译链接. 1.MSBuild 编译链接(IDE就是使用MSBuild,需要工程的.vcxproj和.filters文件) ...

  3. window 安装 skywalking

    1.下载安装包 官网下载需要的安装包: https://github.com/OpenSkywalking/skywalking/releases 分别下载skywalking-collector.z ...

  4. 开始使用gradle

    前提配置gradle环境 每个gradle构建都是以一个脚本开始的.gradle构建默认的名称为build.gradle.当在shell中执行gradle命令时,gradle会去寻找为build.gr ...

  5. python 基础 7.8 json--下

      一. 文件和json 之间的转换 1. json.dump()   #/usr/bin/python #coding=utf-8 #@Time   :2017/11/13 0:12 #@Authe ...

  6. 九度OJ 1179：阶乘 （循环）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5149 解决:1523 题目描述: 输入n, 求y1=1!+3!+...m!(m是小于等于n的最大奇数) y2=2!+4!+...p!(p是 ...

  7. wx.onNetworkStatusChange(function (res) 监听网络状态变化 实践方案

    网络状态 · 小程序 https://developers.weixin.qq.com/miniprogram/dev/api/device.html#wxonnetworkstatuschangec ...

  8. To discount or not to discount in reinforcement learning: A case study comparing R learning and Q learning

    https://www.cs.cmu.edu/afs/cs/project/jair/pub/volume4/kaelbling96a-html/node26.html [平均-打折奖励] Schwa ...

  9. 我的Android进阶之旅------>使用ThumbnailUtils类获取视频的缩略图

    今天看了一段代码,是关于获取视频的缩略图的,让我认识了一个ThumbnailUtils类,代码如下. Bitmap bitmap = ThumbnailUtils.createVideoThumbna ...

  10. SHA-1算法c语言实现

    安全哈希算法(Secure Hash Algorithm)主要适用于数字签名标准 (Digital Signature Standard DSS)里面定义的数字签名算法(Digital Signatu ...