CSS grayscale滤镜+SVG使图片变黑白实例页面
http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html
CSS代码:
.gray {
-webkit-filter: grayscale(%);
-moz-filter: grayscale(%);
-ms-filter: grayscale(%);
-o-filter: grayscale(%);
filter: grayscale(%);
filter: url(gray.svg#grayscale); filter: gray;
}
HTML代码:
<img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="gray" />
SVG代码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
CSS grayscale滤镜+SVG使图片变黑白实例页面的更多相关文章
- CSS3 grayscale滤镜+SVG使图片变黑白实例页面
CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...
- CSS3 grayscale滤镜图片变黑白实例页面
在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-f ...
- CSS使图片变灰
为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...
- css使图片变成黑白效果
-webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...
- CSS3 grayscale滤镜图片变黑白
1. 使整个页面的图片都变成灰色的,代码如下. html{ font-size: 100%; -webkit-text-size-adjust: none; -ms-text-s ...
- css3 图片变黑白 filter
/*图片黑白*/ .img-gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: gray ...
- java 让图片变黑白
import java.awt.Image;import java.awt.color.ColorSpace;import java.awt.image.BufferedImage;import ja ...
- css有关鼠标移动上去图片变透明度变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
随机推荐
- andriod webview和h5
1.WebBrowserActivity extends BaseActivity 2.setContentView(R.layout.activity_web_html); <WebView ...
- JavaFX - 富互联网应用
JavaFX教程™ --必看https://www.yiibai.com/javafx /================= 富互联网应用 是那些提供与Web应用程序类似的功能,并可作为桌面应用程序体 ...
- debug 2
Red Hat Developer Toolsetdelivers the latest stable versions of essential GCC C, C++, Fortran, and s ...
- NB群友
链接:https://ac.nowcoder.com/acm/contest/625/A来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言26214 ...
- C# 文件下载工具类FileDownHelper
using System; using System.IO; using System.Threading; using System.Web; namespace 落地页测试代码 { public ...
- 记录一下这几天遇到的坑(.netcore 代理问题)
1.通过图片的网络url将图片转化为base64格式 方法如下: public static async Task<string> GetImageAsBase64Url(string u ...
- eclipse下properties文件中文乱码的解决方案
今天在工程下编辑.properties文件时输入了中文然后就保存出错,弄了好久才搞定!大家瞄瞄 在中文操作系统下,Eclipse中的Java类型文件的编码的默认设置是GBK,但是对Properties ...
- TypeError: can only concatenate str (not "int") to str解决方式
使用format函数解决问题 for page in range(1,pagebox+1): url = "https://www.dd373.com/s/rbg22w-x9kjbs-wwf ...
- docker镜像常用操作
- c程序内存模型
这篇文章主要记录一下c程序运行时内存空间如何使用.(摘抄自网络) 在一个多任务操作系统中的每个进程都运行在它自己的内存“沙箱”中.这个沙箱是一个虚拟地址空间(virtual address space ...
