Home > Developer > Web Develop
2013-01-10 17:59:04| Category: CSS3 | Tags:css3 Filter Effect filter filter WebKit | Report | Font size Subscription
-webkit-filter, the function of its existence is usually the image of the processing of the original style:<!doctype html>
<meta CharSet=' Utf-8 ' />
<title>-webkit-filter</title>
<style type= "text/css" >
Img{-webkit-filter< Span class= "pun" >:grayscale (1 </STYLE>
</HEAD>
<BODY>
src= "3.jpg" alt= />
</body>
</HTML>
-WebKit-filter:blur(5px); //Blur, here is 5 pixels
-webkit-filter:Sepia(0.5); //Overlay Brown, value range 0-1, here represents 50% Brown
-webkit-filter:brightness(0.5); //brightness, the value range 0-1, 5 times times the brightness (the number is 0 when the Normal style, 1 is the 100% brightness, cannot see the picture)
-webkit-filter:hue-rotate(30deg); //Hue (rotate by hue ring, clockwise, red-orange-yellow-yellow green-green-blue-green-blue-blue-violet-fuchsia-red) Here is the overlay yellow filter
-webkit-filter:iNvert (1); //Inverse color, the value range 0-1,0 is the original, 1 is completely reversed, 0.5 is gray
-webkit-filter:saturate(4); //saturation, the value range 0~*,0 to no saturation, 1 is the original, the higher the value of the greater the saturation
-webkit-filter:contrast (2); //contrast, value range 0~*,0 to no contrast (gray), 1 is the original, the higher the value of the greater the contrast
-webkit-filter:opacity(0.8); //transparency, value range 0~1,0 to full transparency, 1 for original
-webkit-filter:Drop-shadow (17px 17px 20px black); //Shadow
Css3-webkit-filter Filter Effect
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
