Ari-arian css "transparency" - isang simpleng paraan upang gawin ang mga site na maging mas kawili-wiling disenyo

Ngayon, ang paglikha ng disenyo ng website ay nagiging isang art form. Ito ay hindi lamang isang hanay ng mga elemento ng isang tiyak na kulay at pahina ng laki, font ng iba't ibang estilo at pampakay painting. Upang gumawa ng iyong site naiiba mula sa iba, upang akitin ang mga bisita ng pansin at direktang ito sa mga tiyak na mga sangkap, na ginagamit ng isang malaking bilang ng mga pamamaraan at mga tool. Kasama ng mga ito doon ay isang napaka-tanyag na ari-arian css - transparency. pamamaraan na ito ay lubos na fashionable at kaakit-akit, at samakatuwid ay ginagamit madalas. Transparency ay maaaring magbigay sa iba't ibang mga pahina ng mga bagay ng site - text block o ang buong larawan, halimbawa. Ito rin ay nakakamit sa iba't ibang paraan. Ipaalam sa amin suriin ito sa ibaba.

Parameter tukuyin ang mga elemento ng transparency

Parameter upang kontrolin ang transparency ng mga elemento ng ilang. Ang mga ito ay ginagamit depende sa mga tiyak na mga layunin, pati na rin ang browser, na kung saan ay sa ilalim ng "nababagay" disenyo. Kabilang dito ang mga sumusunod na katangian:

• opacity;
• i-filter;
• PNG-imahe bilang background.

Ari-arian halaga css "transparency" ay binago tulad ng sumusunod: ang mas mataas ang numero, mas mababa ang antas ng transparency ng elemento. opacity ng, ito ay nag-iiba mula 0 hanggang 1, sa filter - mula 10 hanggang 100. At ang huli ay ginagamit para sa intérêt Explorer browser, at lahat ng iba pang naaangkop na opacity ari-arian.

Transparency Image (pagpapalit)

Magsimula tayo sa mga opsyon na lalabas transparent kapag nilipat mo ang item Hayaan sa pamamagitan ng pagkaladkad ang mouse.

Ipaalam sa amin isaalang-alang kung paano tukuyin ang transparency ng imahe. nag-aalok ng CSS dalawang pagpipilian. Upang gawin ito, dapat mong irehistro ito nang direkta sa code html-dokumento tulad ng sumusunod:

1. Tukuyin ang path sa imahe.
2. Kami tukuyin ang mga parameter ng transparency kapag ang cursor ay hindi. Upang gawin ito, gamitin natin ang mga katangian ng onmouseover at onmouseout, na kung saan ay nagreseta ang halaga ng opacity, at filter.

Ang parehong mga katangian ay maaaring inireseta sa css-dokumento at ang source code upang magdagdag ng isang reference dito. Ang mga resulta turn out pareho.

Transparency ng teksto at pahina ng mga bloke

Tulad ng para sa mga text o i-block (transparent div), css nag-aalok ng opsyon nito, na katulad ng paglikha ng isang transparent na imahe, mayroon kang upang gamitin ang mga konektado css-file, na kung saan ang ninanais na mga parameter ay nakatakda. Maaari kang pumunta at isang mas simpleng paraan. Kapag itinakda mo ang estilo ng block div style o text p magreseta ang mga sumusunod na html-code upang onmouseover at onmouseout elemento. Ang parehong mga pagpipilian sa trabaho at makabuo ang nais na resulta.

transparency pare-pareho

Sa ilang mga kaso, ang transparency ng isang bagay, isang disenyo ng elemento o teksto na nais mong i-set sa isang patuloy na batayan. Sa situasyon na ito, ang solusyon ay kahit na mas simple kaysa sa kapag pinapadaan mo ang mouse cursor.

Css elemento para sa transparency ay ibinigay sa pamamagitan ng ang mga sumusunod na code. Sa block div style magreseta ng mga halaga para sa background (hal # ff8800), opacity (eg, 0.5) at ang lapad (width) at padding (padding).

Para sa mga imahe na halaga ng code ay paggawa at opacity filter, at tukuyin ang path sa imahe.

RGBA-paraan

May mga iba pang mga pagpipilian para sa paggamit ng ari-arian css: transparency maaaring ilapat sa ang batayang kulay ng anumang elemento ng disenyo. Ito ay gumagamit ng RGBA paraan. Ang unang tatlong mga titik tumayo para sa mga karaniwang kulay (pula, fission, asul), at ang huling - alpha, na nagtatakda ng antas ng transparency. Paggamit ng RGBA-format prescribes transparency, pagturo ito sa huling digit. Halimbawa, tulad ng: background: rgba (240,2,33,0.4035).

konklusyon

Kaya, sa pamamagitan ng paggamit sa kurso ng trabaho sa disenyo ng site simple ngunit epektibong tampok css "transparency", maaari mong gawin itong mas kawili-wili at mas kapansin-pansin elemento na may minimal na pagsusumikap. Ang inilarawan embodiments mga pasadyang tampok transparency ay makakatulong sa iyo na may ito.