gamit ang style attribute, gamit ang background property, at pagtatalaga ng mga value sa rgb(255, 0, 0) , rgb(0, 255, 0) , at rgb(0, 0, 255) . Iyon ay, halili naming ginagawa ang isang channel bilang puspos hangga't maaari, at ang natitirang mga channel ay hindi ginagamit para sa synthesis, dahil ang kanilang halaga ay zero.

Subukang i-edit ang halimbawang ito at tukuyin ang iyong sariling mga halaga, halimbawa rgb(100, 100, 100) .

Pagtatakda ng kulay gamit ang RGBA

Ang CSS3 ay may bagong tool para sa pagtatrabaho sa kulay - ang RGBA na format. Maaari itong tawaging isang ebolusyon ng modelo ng RGB, ngunit sa pagdaragdag ng isang bagong channel - ang A o alpha channel. Itinatakda ng channel na ito ang transparency ng kulay. Ang mga halaga nito ay nakatakda sa hanay mula 0 hanggang 1. Ang isang halaga ng 0 ay tumutugma sa ganap na transparency, 1 - buong opacity (ang kulay ay magiging katulad ng tinukoy sa unang tatlong RGB channel), at mga intermediate na halaga ​tulad ng 0.4 o 0.6 - translucency sa iba't ibang antas.

Halimbawang code.

Narito kung paano ito gagana:

Ang code na ito ay biswal na katulad ng sumusunod, na gumagamit ng RGB na modelo upang tumukoy ng isang halaga ng kulay:

Narito ang kanyang resulta:

Ang halaga ng alpha channel na katumbas ng zero ay ginagawang hindi nakikita ang anumang kulay - ganap na transparent ang isang halaga na katumbas ng isa ang nagsasalin ng kulay sa RGB code nang walang pagbabago. Ang rgba(255,0,0,1.0) property ay nagpapakita ng kulay na red rgb(255, 0, 0) .

Sa pamamagitan ng hexadecimal value (HEX code)

Sa pang-araw-araw na buhay, ginagamit namin ang sistema ng pagbibilang ng decimal. Ang mga pinagmulan nito ay napaka-simple - mayroon tayong sampung daliri sa ating mga kamay, at ang pagbibilang sa ating mga daliri ay naging maginhawa sa buhay. Kung ang decimal system ay may sampung digit: mula 0 hanggang 9, at ang numero 10 ay ang susunod na digit, kung gayon ang hexadecimal number system ay may 16 na numero, at ang susunod na digit ay ang numero 16.

Upang ipahiwatig ang mga code ng kulay, ang mga ordinaryong decimal na digit mula 0 hanggang 9 ay ginagamit bilang hexadecimal digit, at ang mga Latin na titik mula A hanggang F ay ginagamit upang ipahiwatig ang mga numero mula 10 hanggang 15, iyon ay, (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Para sa kalinawan, ilagay natin ito sa isang talahanayan:

Upang magsulat ng mga numerong hexadecimal na mas malaki kaysa sa F (15 sa sistema ng decimal), tulad ng sa sistema ng decimal, ginagamit din nila ang kumbinasyon ng dalawang digit, ngunit hexadecimal na, na halata. Kaya, upang isulat ang decimal na numero 255 sa hexadecimal notation, gamitin ang FF notation.

Ang hexadecimal system ay mas naiintindihan ng computer, at mas mabilis itong nagpoproseso ng mga value na itinakda ng hexadecimal value.

Upang tumukoy ng isang kulay sa hexadecimal, unahan ang numeric na halaga ng isang "#" na sign, halimbawa: #FFC0CB. Ang value na #FFC0CB mismo ay binubuo ng tatlong hexadecimal digit na FF, C0 at CB. Ang kahulugan ng entry na ito ay kapareho ng pagtatakda ng kulay sa RGB na format (rgb(r, g, b)) - bawat hexadecimal digit sa HEX code ay nagpapahiwatig ng saturation ng kulay sa channel nito ng RGB model.

Ipapakita ng code na ito ang mga sumusunod na elemento:

At narito ang isang larawan na may resulta mula sa seksyong "Pagtatakda ng mga kulay gamit ang RGB" sa pahinang ito sa itaas.

Fig.1. Mga kulay sa RGB.

Nakikita namin na ang mga kulay ay magkapareho.

Ang pinaikling notasyon ng HEX color code ay pinapayagan: ang isang 6 na digit na numero ay maaaring isulat bilang isang 3-digit na numero. Valid lang ito kapag naulit ang dalawang digit sa value ng kulay ng isang channel.

Iyon ay, ang sumusunod na pagdadaglat ay katanggap-tanggap:

Halimbawa, ang kulay na #ff22aa ay maaaring isulat bilang #f2a, o ang kulay #44aa22 ay maaaring isulat bilang #4a2.

Pagtatakda ng Kulay Gamit ang HSL

Ang CSS3 ay may bagong format para sa pagtukoy ng mga kulay.

Ang HSL format ay isang pagdadaglat para sa mga salitang Ingles: Hue (kulay), Saturate (saturation) at Lightness (lightness).

Ang kulay sa HSL ay ang halaga ng isang kulay sa isang espesyal na color wheel (Figure 2) at tinukoy sa mga degree. Kung gumuhit tayo ng mga pagkakatulad sa modelo ng RGB, kung gayon ang 0° ay tumutugma sa pula, 120° ay tumutugma sa berde, at 240° ay tumutugma sa asul.

Magbabago ang value ng hue mula 0 hanggang 359.

Larawan 2. HSL color wheel.

Ang pangalawang halaga - saturation (Saturate) ay nakatakda bilang isang porsyento. Sa 100% saturation, ang kulay ay bilang "makatas" hangga't maaari; habang ang saturation indicator ay gumagalaw patungo sa 0%, ang kulay ay nagiging duller at kumukupas sa kulay abo.

Ang pangatlong halaga, ang Lightness, ay nakatakda rin bilang isang porsyento. Kung mas mataas ang porsyento, magiging mas maliwanag ang kulay. Ang matinding halaga ng 0% at 100% ay magsasaad ng itim (walang liwanag) at puti (overexposed) na mga kulay, ayon sa pagkakabanggit, at hindi mahalaga kung aling kulay mula sa color wheel ang napili sa unang channel. Ang pinakamainam na halaga ng liwanag ng kulay ay 50%.

Pagtatakda ng Kulay Gamit ang HSLA

Ang format ng HSLA ay nauugnay sa HSL, tulad ng RGB sa RGBA. Sa format na HSLA, tulad ng sa RGBA, idinagdag ang isang alpha channel, na responsable para sa transparency ng kulay.

Ang kulay na tinukoy sa HSL na format ay mas madaling basahin. Masasabi nating ito ay intuitive. Halimbawa, ang code na hsl(120,60%,50%) ay maaaring kumatawan sa huling kulay kung mayroong larawan ng HSL color wheel sa memorya. Ang parehong ay hindi masasabi tungkol sa mga format ng RGB at HEX; ang code ng kulay na tinukoy sa mga format na ito ay magiging malinaw lamang pagkatapos itong makita sa monitor.

Ang mga bagong format sa CSS3 (HSL, HSLA at RGBA) ay gumagana sa mga browser simula sa mga bersyon: IE 9.0, Opera 10.0 Firefox 3.0. Paano ko mapapagana ang mga istilo sa mga mas lumang browser?

Somebloсk (kulay ng background: rgb(255,50,50); kulay ng background: rgba(255,50,50,0.85) )

Kapag ginagamit ang code na ito sa mas lumang mga browser, ang kulay ng background para sa .somebloсk class, bagama't hindi ito gagamit ng alpha channel, ay ipapakita sa RGB na format.

HEX/HTML

Ang kulay ng HEX ay walang iba kundi isang hexadecimal na representasyon ng RGB.

Ang mga kulay ay kinakatawan bilang tatlong pangkat ng mga hexadecimal digit, kung saan ang bawat pangkat ay may pananagutan para sa sarili nitong kulay: #112233, kung saan 11 ay pula, 22 ay berde, 33 ay asul. Ang lahat ng mga halaga ay dapat nasa pagitan ng 00 at FF.

Maraming mga application ang nagbibigay-daan sa isang pinaikling anyo ng hexadecimal color notation. Kung ang bawat isa sa tatlong pangkat ay naglalaman ng parehong mga character, halimbawa #112233, maaari silang isulat bilang #123.

1. h1 (kulay: #ff0000; ) /* pula */
2. h2 (kulay: #00ff00; ) /* berde */
3. h3 ( kulay: #0000ff; ) /* asul */
4. h4 ( kulay: #00f; ) /* parehong asul, shorthand */

RGB

Ang puwang ng kulay ng RGB (Red, Green, Blue) ay binubuo ng lahat ng posibleng kulay na maaaring gawin sa pamamagitan ng paghahalo ng pula, berde, at asul. Ang modelong ito ay sikat sa photography, telebisyon, at computer graphics.

Ang mga halaga ng RGB ay tinukoy bilang isang integer mula 0 hanggang 255. Halimbawa, ang rgb(0,0,255) ay ipinapakita bilang asul dahil ang asul na parameter ay nakatakda sa pinakamataas na halaga nito (255) at ang iba ay nakatakda sa 0.

Ang ilang mga application (lalo na ang mga web browser) ay sumusuporta sa porsyento ng pag-record ng mga halaga ng RGB (mula 0% hanggang 100%).

1. h1 ( kulay: rgb(255, 0, 0); ) /* pula */
2. h2 ( kulay: rgb(0, 255, 0); ) /* berde */
3. h3 ( kulay: rgb(0, 0, 255); ) /* asul */
4. h4 ( kulay: rgb(0%, 0%, 100%); ) /* parehong asul, porsyento ng entry */

Ang mga halaga ng kulay ng RGB ay sinusuportahan sa lahat ng mga pangunahing browser.

RGBA

Kamakailan, natutunan ng mga modernong browser na magtrabaho kasama ang modelo ng kulay ng RGBA - isang extension ng RGB na may suporta para sa isang alpha channel, na tumutukoy sa opacity ng isang bagay.

Ang halaga ng kulay ng RGBA ay tinukoy bilang: rgba(pula, berde, asul, alpha). Ang alpha parameter ay isang numero mula 0.0 (ganap na transparent) hanggang 1.0 (ganap na opaque).

1. h1 ( kulay: rgb(0, 0, 255); ) /* asul sa regular na RGB */
2. h2 ( kulay: rgba(0, 0, 255, 1); ) /* ang parehong asul sa RGBA, dahil opacity: 100% */
3. h3 ( kulay: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
4. h4 ( kulay: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
5. h5 ( kulay: rgba(0, 0, 255, 0); ) /* ganap na transparent */

Ang RGBA ay suportado sa IE9+, Firefox 3+, Chrome, Safari, at Opera 10+.

HSL

Ang modelo ng kulay ng HSL ay isang representasyon ng modelo ng RGB sa isang cylindrical coordinate system. Ang HSL ay kumakatawan sa mga kulay sa isang mas madaling maunawaan at nababasa ng tao na paraan kaysa sa karaniwang RGB. Ang modelo ay kadalasang ginagamit sa mga application ng graphics, mga paleta ng kulay, at pagsusuri ng imahe.

Ang HSL ay nangangahulugang Hue (kulay/kulay), Saturation (saturation), Lightness/Luminance (lightness/lightness/luminosity, hindi dapat ipagkamali sa liwanag).

Tinutukoy ng Hue ang posisyon ng kulay sa color wheel (mula 0 hanggang 360). Ang saturation ay ang porsyento na halaga ng saturation (mula 0% hanggang 100%). Ang liwanag ay isang porsyento ng liwanag (mula 0% hanggang 100%).

1. h1 ( kulay: hsl(120, 100%, 50%); ) /* berde */
2. h2 ( kulay: hsl(120, 100%, 75%); ) /* light green */
3. h3 ( kulay: hsl(120, 100%, 25%); ) /* dark green */
4. h4 ( kulay: hsl(120, 60%, 70%); ) /* pastel green */

Ang HSL ay suportado sa IE9+, Firefox, Chrome, Safari, at Opera 10+.

HSLA

Katulad ng RGB/RGBA, ang HSL ay may HSLA mode na may alpha channel support para ipahiwatig ang opacity ng isang bagay.

Ang halaga ng kulay ng HSLA ay tinukoy bilang: hsla(kulay, saturation, liwanag, alpha). Ang alpha parameter ay isang numero mula 0.0 (ganap na transparent) hanggang 1.0 (ganap na opaque).

1. h1 ( kulay: hsl(120, 100%, 50%); ) /* berde sa normal na HSL */
2. h2 ( kulay: hsla(120, 100%, 50%, 1); ) /* ang parehong berde sa HSLA, dahil opacity: 100% */
3. h3 ( kulay: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
4. h4 ( kulay: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
5. h5 ( kulay: hsla(120, 100%, 50%, 0); ) /* ganap na transparent */

CMYK

Ang modelo ng kulay ng CMYK ay madalas na nauugnay sa pag-print at pag-print ng kulay. Ang CMYK (hindi tulad ng RGB) ay isang subtractive na modelo, ibig sabihin na ang mas mataas na mga halaga ay nauugnay sa mas madidilim na kulay.

Ang mga kulay ay tinutukoy ng ratio ng cyan (Cyan), magenta (Magenta), dilaw (Dilaw), kasama ang pagdaragdag ng itim (Key/blackK).

Ang bawat isa sa mga numerong tumutukoy sa isang kulay sa CMYK ay kumakatawan sa porsyento ng tinta ng isang partikular na kulay na bumubuo sa kumbinasyon ng kulay, o mas tiyak, ang laki ng screen tuldok na output sa isang phototypesetting machine sa pelikula ng isang partikular na kulay ( o direkta sa printing plate sa kaso ng CTP).

Halimbawa, para makakuha ng kulay ng PANTONE 7526, paghaluin mo ang 9 na bahaging cyan, 83 bahaging magenta, 100 bahaging dilaw, at 46 na bahaging itim. Ito ay maaaring tukuyin bilang mga sumusunod: (9,83,100,46). Minsan ang mga sumusunod na pagtatalaga ay ginagamit: C9M83Y100K46, o (9%, 83%, 100%, 46%), o (0.09/0.83/1.0/0.46).

HSB/HSV

Ang HSB (kilala rin bilang HSV) ay katulad ng HSL, ngunit ang mga ito ay dalawang magkaibang mga modelo ng kulay. Pareho silang nakabatay sa cylindrical geometry, ngunit ang HSB/HSV ay nakabatay sa "hexcone" na modelo, habang ang HSL ay nakabatay sa "bi-hexcone" na modelo. Mas gusto ng mga artist na gamitin ang modelong ito, karaniwang tinatanggap na ang HSB/HSV device ay mas malapit sa natural na perception ng mga kulay. Sa partikular, ang HSB color model ay ginagamit sa Adobe Photoshop.

Ang HSB/HSV ay kumakatawan sa Hue (kulay/kulay), Saturation (saturation), Brightness/Value (liwanag/halaga).

Tinutukoy ng Hue ang posisyon ng kulay sa color wheel (mula 0 hanggang 360). Ang saturation ay ang porsyento na halaga ng saturation (mula 0% hanggang 100%). Ang liwanag ay isang porsyento ng liwanag (mula 0% hanggang 100%).

XYZ

Ang modelo ng kulay ng XYZ (CIE 1931 XYZ) ay isang puwang sa matematika. Hindi tulad ng RGB, CMYK, at iba pang mga modelo, sa XYZ ang mga pangunahing bahagi ay "haka-haka," ibig sabihin ay hindi mo maaaring iugnay ang X, Y, at Z sa anumang hanay ng mga kulay na ihahalo. Ang XYZ ay ang master na modelo para sa halos lahat ng iba pang mga modelo ng kulay na ginagamit sa mga teknikal na larangan.

LAB

Ang modelo ng kulay ng LAB (CIELAB, “CIE 1976 L*a*b*”) ay kinakalkula mula sa espasyo ng CIE XYZ. Ang disenyo ng Lab ay idinisenyo upang lumikha ng isang puwang ng kulay kung saan ang mga pagbabago sa kulay ay magiging mas linear sa mga tuntunin ng pang-unawa ng tao (kumpara sa XYZ), iyon ay, upang ang parehong pagbabago sa mga halaga ng coordinate ng kulay sa iba't ibang mga lugar ng kulay ang espasyo ay magbubunga ng parehong sensasyon ng pagbabago ng kulay.

Mayroong ilang mga paraan upang kumatawan sa kulay sa disenyo ng web.

Ang HEX ay isang hexadecimal color representation system batay sa base 16. Para sa system na ito, Arabic decimal digit mula 0 hanggang 9 at Latin na mga letra mula A hanggang F ay ginagamit upang umakma sa digital na numero hanggang 16. Para sa web design, 16 primary (key) na kulay ay ginagamit, ang tinatawag na hexadecimal color code #RRGGBB, kung saan ang bawat pares ay may pananagutan sa bahagi nito sa kulay: RR – pula, GG – berde at BB – asul. Ang bawat bahagi ng kulay ay mula 00 hanggang FF.

Dalawang iba pang representasyon ng kulay sa disenyo ng web ay: sa anyo ng RGB(*,*,*), kung saan ang bawat “*” fraction ng isang kulay ay kinakatawan ng mga decimal na digit mula 0 hanggang 255 at ng mga pangalan ng kulay sa English.

Kapag lumilikha ng isang kulay na imahe, ang pangunahing problema ay ang tamang pagpaparami ng mga kulay sa iba't ibang uri ng mga computer, monitor at browser. Kung ang browser ay hindi makapagpakita ng isang kulay nang tama, ito ay pipili ng isang katulad o naghahalo ng ilang mga kulay. At kung minsan maaari itong mapalitan ng ilang ganap na magkakaibang kulay.

mesa 16 pangunahing kulay, na ginagamit sa lahat ng browser

Pangalan	Kulay	Hex	(RGB)
Aqua (alon ng dagat)		#00FFFF	(000,255,255)
Itim		#000000	(000,000,000)
Asul		#0000FF	(000,000,255)
Fuchsia (magenta)		#FF00FF	(255,000,255)
Gray		#808080	(128,128,128)
Berde		#008000	(000,128,000)
Lime (matingkad na berde)		#00FF00	(000,255,000)
Maroon (maitim na burgundy)		#800000	(128,000,000)
Navy (madilim na asul)		#000080	(000,000,128)
Olive		#808000	(128,128,000)
Lila		#800080	(128,000,128)
Pula		#FF0000	(255,000,000)
pilak		#C0C0C0	(192,192,192)
Teal (grey-green)		#008080	(000,128,128)
Puti		#FFFFFF	(255,255,255)
Dilaw		#FFFF00	(255,255,000)

mesa lila mga kulay at mga lilim nito

Pangalan	Kulay	Hex	(RGB)
Magenta (magenta)		#FFCBDB	(255,203,219)
Magenta (magenta)		#FF0099	(255,000,153)
Magenta (magenta)		#F95A61	(249,090,097)
Fuchsia (fuchsia)		#FF00FF	(255,000,255)
Mauvein (aniline purple)		#EF0097	(239,000,151)
Salmon pink (orange pink)		#FF91A4	(255,145,164)
Cenise (isang lilim ng lila)		#DE3163	(153,149,140)
Aubergine Eggplant (talong)		#990066	(153,000,132)
Lavender blush (pinkish-lavender)		#FFF0F5	(255,240,245)
Lilac (lilac)		#C8A2C8	(200,162,200)
Magenta (magenta)		#FF008F	(255,000,143)
Orchid (orchid)		#DA70D6	(218,112,214)
Pula-lila (purple-red)		#C71585	(199,021,133)
Sanguine (sanguine)		#92000A	(146,000,010)
Thistle (lilim ng lila)		#D8BFD8	(185,211,238)
Violet-eggplant (isang lilim ng lila)		#991199	(153,017,153)
Rosa vivo (deep pink)		#FF007F	(255,000,127)
Lavender-rose (isang lilim ng lila)		#FBA0E3	(108,123,139)
Mountbatten pink		#997ABD	(153,122,141)

mesa kulay abo mga kulay at mga lilim nito

Pangalan	Kulay	Hex	(RGB)
Gray		#808080	(128,128,128)
Gray		#bebebe	(190,190,190)
(Grey-shade)		#858585	(133,133,133)
kulay abo33		#545454	(084,084,084)
(Grey slate)		#708090	(112,128,144)
(Kuwarts)		#99958с	(153,149,140)
(Maliwanag na kulay abo)		#bbbbbb	(187,187,187)
(Pilak)		#c0c0c0	(192,192,192)
(Grey-white)		#f0f0f0	(240,240,240)
(Mga balbas ni Abdel-Kerim)		#e0e0e0	(224,224,224)
LightGray (Maliwanag na kulay abo)		#d3d3d3	(211,211,211)
LightStateGray()		#778899	(119,136,153)
StateGray-1 (Pale cornflower blue1)		#c6e2ff	(198,226,255)
StateGray-2 (Pale cornflower blue2)		#b9d3ee	(185,211,238)
StateGray3()		#9fb6cd	(159,182,205)
StateGray4()		#6c7b8b	(108,123,139)

Tingnang mabuti ang guhit. Ang background ng drop-down na window ay ginawang translucent. Ito ay isang medyo pangkaraniwang diskarte sa disenyo. Pag-isipan natin kung paano ito maipapatupad.

Gawain

Gawing translucent ang kulay na cross-browser.

Solusyon

Ang unang naisip sa sitwasyong ito ay gumamit ng png24 na imahe na may nakatakda nang translucency para sa background. Ngunit ang larawang ito ay ganap na hindi kailangan. Magagawa mo nang maayos nang wala ito (at samakatuwid ay walang karagdagang kahilingan sa server). Subukan pa rin nating hanapin ang pinakamainam na solusyon.

Ang pangalawang pag-iisip ay ang paggamit. Ngunit sa kasong ito ito ay hindi masyadong maginhawa. Pagkatapos ng lahat, hindi lamang ang background, kundi pati na rin ang mga inskripsiyon ay magiging translucent. Oo, sa totoo lang, ang buong window nang sabay-sabay.

Siyempre, maaari mong subukang magdagdag ng karagdagang lalagyan at maglapat lamang ng opacity dito, ngunit ang HTML na elementong ito ay ilalayon lamang para sa dekorasyon at malinaw na magiging kalabisan. Posible bang gawin nang wala ito?

Syempre kaya mo! Kung gumagamit ka ng RGBA.

Format ng paglalarawan ng kulay ng RGBA

Pinapayagan ka ng CSS3 na tukuyin ang kulay gamit ang RGB at RGBA function. Sa kasong ito, dapat nating ipahiwatig ang proporsyon ng bawat bahagi ng kulay kung saan ang isang byte ay inilalaan (mula 0 hanggang 255, kung sakaling hindi alam ng sinuman).

Ang syntax para sa kasong ito ay napaka-simple:

Background: rgb(0, 255, 0); /* purong berde */

Para sa RGBA, idinagdag ang ikaapat na parameter - alpha transparency (mula 0 hanggang 1).

Background: rgba(255, 0, 0, 0.5); /* purong pula na may 50% transparency */

Eto na, ang solusyon sa problema natin. Itakda lamang ang kulay ng background gamit ang rgba at ang lahat ay magiging hitsura sa paraang gusto namin. Nang walang mga hindi kinakailangang larawan at elemento!

Saan ko makukuha ang mga numerong ito?

Maaari mong tingnan ang mga bahagi ng kulay gamit ang tool ng eyedropper ng Photoshop.

Tungkol sa cross-browser compatibility

Dahil ang RGB function ay mas matanda kaysa sa RGBA at naroroon na mula pa noong panahon ng CSS2 standard, upang maprotektahan laban sa mga pinakasinaunang browser, maaari mong gamitin ang sumusunod na duplicate na konstruksyon:

SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )

Sa diskarteng ito, ang mga lolo sa tuhod ng mga modernong browser ay hindi magkakaroon ng translucency, ngunit ang kulay mismo ay mananatiling tama.

Kakailanganin mong hiwalay na pangalagaan ang IE. Hindi naiintindihan ng mga asno ang RGBA hanggang sa bersyon 8 kasama.

Gaya ng dati: lupa para sa mga magsasaka, mga pabrika para sa mga manggagawa, at mga asno isang saklay! Sa anyo ng .

Siyempre, sa mga kondisyon ng labanan inilalagay namin ang panuntunang ito sa isang hiwalay na CSS, na aming ikinonekta.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Ang lansihin ay tukuyin ang panimulang at pangwakas na mga kulay bilang pareho (ff0000 - pula) at samantalahin ang katotohanan na maaari mong itakda ang alpha channel para sa gradient sa filter na ito (sa halimbawa, ang halaga ay 80).

Para sa sanggunian: ginagamit ng filter ang hexadecimal system at ang code para sa ganap na opaque na kulay ay FF ​​(sa decimal ito ay 255). Alinsunod dito, ang hexadecimal 80 ay decimal 128, ibig sabihin, 50% transparency.

Sinubok sa:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome