Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Grundlagen-Tutorial-Filtereffekt

PHP中文网
Freigeben: 2018-09-27 17:24:24
Original
1863 Leute haben es durchsucht

1. Penapis alfa

Sintaks:

{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}
Nach dem Login kopieren

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:

CSS-Grundlagen-Tutorial-FiltereffektCSS-Grundlagen-Tutorial-Filtereffekt
CSS-Grundlagen-Tutorial-FiltereffektCSS-Grundlagen-Tutorial-Filtereffekt

2 Penapis kabur

Sintaks: Untuk HTML: <🎜. >

{ilter:blur(add=add,direction=direction,strength=strength)}
Nach dem Login kopieren

Untuk bahasa Skrip:

[oblurfilter=] object.filters.blur
Nach dem Login kopieren

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)
Nach dem Login kopieren

Saya terbang kepada awak, hujan turun dengan perlahan!

CSS-Grundlagen-Tutorial-FiltereffektCSS-Grundlagen-Tutorial-Filtereffekt
CSS-Grundlagen-Tutorial-FiltereffektCSS-Grundlagen-Tutorial-Filtereffekt
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)}
Nach dem Login kopieren

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

filter:chroma(color=blue)
Nach dem Login kopieren

滴水檐坊

5、DropShadow 滤镜

语法:

{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
Nach dem Login kopieren

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

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

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

如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果

CSS-Grundlagen-Tutorial-Filtereffektdropshadow(color=gray,offx=5,offy=5.positive=0) 效果
正常文字 dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字

6、Glow 滤镜

语法:

{filter:glow(color=color,strength)}
Nach dem Login kopieren

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

滴水檐茶坊

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

滴水檐茶坊

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

以上就是css基础教程之滤镜效果的内容,更多相关内容请关注PHP中文网(www.php.cn)!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage