kesan penapis tutorial asas css

1. Penapis alfa

Sintaks:

{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}

Atribut "Alpha" adalah untuk menggabungkan elemen sasaran dengan latar belakang . Pereka bentuk boleh menentukan nilai berangka untuk mengawal tahap pengadunan. "Penggabungan dengan latar belakang" ini dikenali sebagai ketelusan unsur. Dengan menentukan koordinat, anda boleh menentukan ketelusan titik, garisan dan permukaan.

Maksud parameternya adalah seperti berikut:

"kelegapan" mewakili tahap ketelusan. Julat lalai adalah dari 0 hingga 100, yang sebenarnya merupakan peratusan. Iaitu, 0 mewakili telus sepenuhnya dan 100 mewakili legap sepenuhnya.

"finishopacity" ialah parameter pilihan Jika anda ingin menetapkan kesan ketelusan kecerunan, anda boleh menggunakannya untuk menentukan ketelusan pada penghujungnya. Julatnya juga 0 hingga 100.

Parameter "gaya" menentukan ciri bentuk kawasan lutsinar. Antaranya, 0 mewakili bentuk seragam, 1 mewakili bentuk linear, 2 mewakili bentuk jejari, dan 3 mewakili segi empat tepat.

"STARTX" dan "STARTY" mewakili koordinat X dan Y permulaan bagi kesan ketelusan kecerunan.

"FINISHX" dan "FINISHY" mewakili koordinat X dan Y bagi penghujung kesan ketelusan kecerunan.

Kesannya adalah seperti berikut:

2 Penapis kabur

Sintaks: Untuk HTML: <🎜. >

{ilter:blur(add=add,direction=direction,strength=strength)}

Untuk bahasa Skrip:

[oblurfilter=] object.filters.blur

Apabila anda dengan cepat meluncurkan jari anda ke atas lukisan minyak yang belum kering, gambar akan menjadi kabur . "Kabur" menghasilkan kesan kabur yang sama. Parameter "TAMBAH" ialah pertimbangan Boolean "BENAR (lalai)" atau "PALSU". Ia menentukan sama ada gambar ditukar kepada kesan kabur impresionistik. Kesan kabur dilakukan mengikut arah jam;

Parameter "DIRECTION" digunakan untuk menetapkan arah kabur. 0 darjah mewakili menegak ke atas, dan setiap 45 darjah ialah satu unit. Nilai lalainya ialah 270 darjah ke kiri;

Nilai "STRENGTH" hanya boleh ditentukan menggunakan integer, yang mewakili bilangan piksel lebar yang akan dipengaruhi oleh kabur. Lalai ialah 5.

Untuk fon pada halaman web, jika anda menetapkan kaburnya "ADD=1", maka kesan fon ini akan menjadi sangat cantik. Seperti berikut:

filter:blur(add=ture,direction=135,strength=10）

Saya terbang kepada awak, hujan turun dengan perlahan!

3. FlipH, penapis FlipV

Sintaks: {filter:filph}, {filter:filpv} masing-masing ialah penyongsangan mendatar dan penyongsangan menegak , khususnya sebagai berikut:

4、Chroma 滤镜

语法：

{filter:chroma(color=color)}

使用”Chroma"属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma 滤镜过滤掉兰色，就成了下面的样子。

filter:chroma(color=blue)

滴水檐坊

5、DropShadow 滤镜

语法：

{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}

“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。

"Color"代表投射阴影的颜色，"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。

"Positive"参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。

如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果

正常文字	dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字

6、Glow 滤镜

语法：

{filter:glow(color=color,strength)}

当对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。
filter:glow(color=red,strength=10) 后的效果

滴水檐茶坊

filter:glow(color=#ffff00,strength=5) 后的效果

滴水檐茶坊

好象可以把PhotoShop踹到一边了，是吗？

以上就是css基础教程之滤镜效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！