-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. hdu2473 Junk-Mail Filter 并查集+删除节点+路径压缩

    Description Recognizing junk mails is a tough task. The method used here consists of two steps:  1) ...

  2. Executors几种常用的线程池性能比较

    java编程中,经常会利用Executors的newXXXThreasPool生成各种线程池,今天写了一小段代码,简单测试了下三种常用的线程池: import com.google.common.ut ...

  3. phpstudy nginx下curl请求本地其他项目

    curl 请求的时候 如果用post请求,传递参数为 数组的时候 header 头 会被设置为  multipart/form-data  如果是字符串 形式 header 头会被设置为applica ...

  4. tableView的cell显示不全的问题

    如果是最上面的cell没有显示完整 1.重新设置tableview的frame: 例如你的搜索框高度为50,那么设置self.tableview.frame= CGRectMake(0,50,self ...

  5. EasyNVR H5直播流媒体解决方案前端构建之：如何播放自动适配RTMP/HLS直播播放

    之前在进行EasyNVR多屏开发的时候,由于多屏功能不需要在手机端展示出来(pc多播放为RTMP,手机端播放为HLS),因此只注意到了引用videojs来进行rtmp的播放.由于不同项目需求不同,对h ...

  6. 九度OJ 1044：Pre-Post（先序后序） （n叉树、递归）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:701 解决:398 题目描述: We are all familiar with pre-order, in-order and post- ...

  7. 关于BlockingQueue

    1 什么是BlockingQueue 2 BlockingQueue有什么用 3 ArrayBlockingQueue的用途 1 它是一个线程安全的队列 2 它是一个容量固定的队列 3 它为什么叫bl ...

  8. oracle 11g ocr 冗余配置

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/royjj/article/details/30506343  oracle 11g ocr 冗余 ...

  9. 关于SAP S4 HANA 的13个问题

    SAP S/4HANA的路线图是怎样的?价格是多少?下一步还将添加哪些新模块?莫不闻专业SAP问答平台结合SAP HANA及SAP HANA应用商务套件开发全球负责人Uwe Grigoleit帮大家整 ...

  10. Bitmaps

    核心知识点: 1.Bitmaps是一种特殊的“数据结构”,实质上是一个字符串,操作单元是位. 2.命令: a.setbit:设置值,只能存储0和1,适用二元判断类型 b.getbit:获取值 c.bi ...