Mr. Basic CSS Skills--Filter_html/css_WEB-ITnose-HTML Tutorial-php.cn

Mr. Basic CSS Skills--Filter_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:53

Original

1338 people have browsed it

The previous blog talked about the basic usage. In this blog we will talk about filters and image processing in CSS. When you open a web page, especially the official website of some companies, the homepage is always very gorgeous. I used to think that it was all a combination of flash or many pictures. Now that I have learned CSS filters, I want to read the following. Everyone You can also create some very gorgeous pages.

CSS filter is not a browser plug-in, nor does it comply with CSS standards. It is a collection of functions specially developed by Microsoft to enhance browsing functions and integrated into IE browser. Due to the browser It has a wide range of uses, so CSS filters are also loved by designers. The identifier of a CSS filter is the same as other CSS statements in the filter body, and is very simple.

1. Filter attributes

In fact, the filter is a simple transparency, but it is such a simple transparency, but because its effect is very good, the frequency of application is very high .

1. Alpha channel

.alpha{      filter:alpha(opacity=50)     //表示透明度为50%}

Copy after login

2. Blur (blur)

<span style="font-size:14px;">.blur{     filter:progid:DXImageTransform.Morcrosoft.blur(pixelradius=4,makeshadow=false);}</span>

Copy after login

3. Transparent color

.chorma{      filter:chromalcolor=FF6800;}

Copy after login

4. Flip

.flip1{     filter:fliph;   /*水平翻转*/ }.flip3{     filter:flipv;   /*竖直翻转*/ }.flip3{     filter:flipv fliph;   /*水平竖直同时翻转*/ }

Copy after login

2. Filter application

You must have seen reflections in water, they are very beautiful, so today we will use this filter to realize our water filter

<html><head><title>三个滤镜同时使用</title><style><!--body{	margin:12px;	background:#000000;}.three{	filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);	/* 同时使用三个滤镜 */	/* 竖直翻转、透明、波浪效果 */}--></style>   </head><body>	<img src="lotus.jpg"><br>	<img src="lotus.jpg" class="three"></body></html>

Copy after login

It looks like It's not very beautiful, just a few simple attributes can realize the functions of Photoshop, and it can also be changed according to our requirements.

3. Summary

Of course he uses filter in the ID, but in non-IE browsers, he uses opacity, and his value is between 0 and 1 Time, the specific writing method is no longer here, you just need to change filter:alpha(opacity=60) to opacity=0.6. Although the function of this filter is very powerful, it does not mean that PhotoShop is not good. Both have their own advantages and disadvantages. Photoshop can still customize pictures for us.