Home > Developer > Web Develop
IE-specific filters are often added as CSS3 for various new features, and Adobe has moved to HTML5 with Chrome to launch the CSS3 filter feature, so currently only webkit the kernel's browser supports CSS3 filter, and FF and ie10+ You will need to use the SVG filter (SVG effects for HTML) or canvas as an alternative, while ie5.5~9 uses IE filters, js+div, or VML processing!
This article only does the CSS3 filter realization, other specific can source the article .
The CSS3 Filter compatibility table is as follows:
Filter implementations:
PC Display:
Phone Display:
Related code:
1.HTML Code
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Metacontent= "Width=device-width,user-scalable=no"name= "Viewport" /> <Linkhref= "/images/web_mini.ico"type= "Image/x-icon"rel= "shortcut icon" /> <title>CSS3 Filter Implementation</title> <Linkhref= "Css/20160110.css"rel= "stylesheet" /></Head><Body> <Divstyle= "display:table; text-align:center; width:100%; height:100%;"> <Divstyle= "Display:table-cell; vertical-align:middle;"> <Divclass= "div_20160110"> <imgsrc= "Img/img_20160110.jpg"class=""alt= "original"title= "original" /> <imgsrc= "Img/img_20160110.jpg"class= "Sepia"alt= "Speia filter"title= "Speia filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Grayscale"alt= "Grayscale Filter"title= "Grayscale Filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Blur"alt= "Gaussian blur filter"title= "Gaussian blur filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Invert"alt= "Inverse color filter"title= "Inverse color filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Saturate"alt= "Saturation filter"title= "Saturation filter" /> <imgsrc= "Img/img_20160110.jpg"class= "contrast"alt= "Contrast filter"title= "Contrast filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Brightness"alt= "Brightness Filter"title= "Brightness Filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Hue-rotate"alt= "Hue rotation filter"title= "Hue rotation filter" /> <imgsrc= "Img/img_20160110.jpg"class= "Drop-shadow"alt= "Shadow Filter"title= "Shadow Filter" /> </Div> </Div> </Div></Body></HTML>
2.CSS Code
. div_20160110 img{Max-width:150px;Max-height:150px;}. Sepia{/** format, Filer:sepia (effect range) * Effect range, value range of 0-1 or 0-100%;0 means no effect, 1 or 100% for maximum effect*/-webkit-filter:Sepia (100%);-moz-filter:Sepia (100%);-o-filter:Sepia (100%);-ms-filter:Sepia (100%);Filter:Sepia (100%);}. Grayscale{/** format, Filer:grayscale (effect range) * Effect range, value range of 0-1 or 0-100%;0 means no effect, 1 or 100% for maximum effect*/-webkit-filter:grayscale (100%);-o-filter:grayscale (100%);-moz-filter:grayscale (100%);-ms-filter:grayscale (100%);Filter:grayscale (100%);}. Blur{/** format, Filer:blur (blur radius) * Blur radius, value range 0~npx,0 to no effect*/-webkit-filter:Blur (2px);-moz-filter:Blur (2px);-o-filter:Blur (2px);-ms-filter:Blur (2px);Filter:Blur (2px);}. Invert{/** format, Filer:invert (effect range) * Effect range, value range 0~1 or 0~100%,0 to no effect, 1 or 100% for maximum effect*/-webkit-filter:Invert (1);-moz-filter:Invert (1);-o-filter:Invert (1);-ms-filter:Invert (1);Filter:Invert (1);}. Saturate{/** format, filer:saturate (effect range) * Effect range, value range >=0 number or percentage, 1 is no effect, 0 is grayscale*/-webkit-filter:saturate (2);-moz-filter:saturate (2);-o-filter:saturate (2);-ms-filter:saturate (2);Filter:saturate (2);}. Contrast{/** format, filer:contrast (effect range) * Effect range, value range >=0 number or percentage, 1 for no effect*/-webkit-filter:Contrast (2);-moz-filter:Contrast (2);-o-filter:Contrast (2);-ms-filter:Contrast (2);Filter:Contrast (2);}. Brightness{/** format, filer:brightness (effect range) * Effect range, value range >=0 number or percentage, 1 for no effect*/-webkit-filter:Brightness (2);-moz-filter:Brightness (2);-o-filter:Brightness (2);-ms-filter:Brightness (2);Filter:Brightness (2);}. Hue-rotate{/** format, filer:hue-rotate (effect range) * Effect range, value fan 0deg~365deg,0 (default) is no effect*/-webkit-filter:hue-rotate (200deg);-moz-filter:hue-rotate (200deg);-o-filter:hue-rotate (200deg);-ms-filter:hue-rotate (200deg);Filter:hue-rotate (200deg);}. Drop-shadow{/** format, Filer:drop-shadow (X-offset Y-offset shadow blur radius shadow color) * X-offset and Y-offset are shadows relative to the upper left corner of the element of the displacement distance; * Note: * 1. The appearance of the shadow is affected by the Border-radius style; * 2. : pseudo-elements such as after and: before inherit the effect of shadows. */-webkit-filter:Drop-shadow (1px 1px 0px #333);-moz-filter:Drop-shadow (1px 1px 0px #333);-o-filter:Drop-shadow (1px 1px 0px #333);-ms-filter:Drop-shadow (1px 1px 0px #333);Filter:Drop-shadow (1px 1px 0px #333);/*Rounded Corners*/Border:Solid 2px #e00;-webkit-border-radius:1px;}
Test address:http://ycdoit.com/test/2016/20160110.html
"CSS3" CSS3 filter Implementation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
