Home > Developer > Web Develop
We know that using Photoshop to adjust the brightness and contrast of an image, or to turn a picture into grayscale, is a common feature. Today I'm going to introduce you to a couple of new features, and we'll use CSS to add the same effect to the web image.
First we display a picture in the webpage, the HTML code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Linkrel= "stylesheet"href= "Styles.css"Media= "Screen"><title>CSS3 Real-Life development: Using CSS3 to achieve Photoshop's filtering effect</title></Head><Body><imgsrc= "20140821.jpg"width= "$" /></Body></HTML>
This runs as follows:
Here I will introduce the corresponding features, but also to show you the application of image filter style after.
First, adjust the image gray scale: Grayscale, the range is 0%-100%. Apply the style code as follows:
{ -webkit-filter: grayscale (100%); At this point the page effect is:
Second, apply the sepia effect to the picture: Sepia, the range 0-100% syntax code is as follows:
{ -webkit-filter: Sepia (100%); } Run the page effect at this point:
Third, adjust the picture exposure: brightness, Range 0%-100%, the syntax code is as follows:
{ -webkit-filter: brightness (40%); } Run the page with the following effect:
Four, adjust the image contrast: contrast, syntax code is as follows:
{ -webkit-filter: contrast (500%); } The page works as follows:
Finally, we introduce a fuzzy effect: blur, Syntax code is as follows:
{ -webkit-filter: Blur (2px); At this point the page works as follows:
Of course, the above features can be used at the same time, for example, when the mouse across the picture, the picture becomes gray, and blur the picture, then the code is as follows:
{ -webkit-filter:grayscale (100%) blur (2px); } At this point the page effect is:
It is so simple to use CSS features to complete the filtering function of Photoshop.
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
