Эд хөрөнгийн CSS "ил тод байдал" - сайтын илүү сонирхолтой дизайныг хийх нь энгийн арга

Өнөөдөр, вэб дизайны бүтээл нь урлагийн хэлбэр болж байна. Энэ нь тодорхой өнгө, Хуудас элемент нь зүгээр л нэг багц биш юм хэмжээ, үсгийн өөр өөр хэв маяг, сэдэвчилсэн зураг. Таны сайт бусдаас өөр хийх зочдын анхаарлыг татахын тулд, зарим элементүүдийн үүнийг шууд тулд арга, багаж хэрэгсэл нь маш олон тооны ашигласан байна. ил тод байдал - Тэдний дунд маш алдартай үл хөдлөх хөрөнгийн CSS байна. Энэ арга нь маш загварлаг, дур булаам байдаг тул ихэвчлэн хэрэглэгддэг. Жишээ нь текст блок, эсвэл бүхэл бүтэн зураг, - Ил тод байдал сайтын нь өөр өөр обьектуудад хуудсыг өгч болох юм. Энэ нь мөн өөр өөр арга замаар бий. АНУ-ын доор нь авч үзье.

Параметрүүд ил тод элементүүдийг зааж

Параметрүүд нь хэд хэдэн элементүүдийн ил тод байдлыг зохицуулахад оршино. Тэд хөтөч "тохируулж" дизайны дор байдаг, түүнчлэн тодорхой зорилтуудыг хамааран ашиглаж байна. Эдгээр нь дараах шинж нь:

• тунгалаг,
• шүүх,
• арын гэж PNG зураг.

Дээд тоог элементийн ил тод доод түвшин: Хөрөнгийн үнэ цэнэ нь CSS "ил тод байдал" дараах байдлаар өөрчилсөн байна. 10-аас 100-өөд Харин сүүлийн Interet Explorer браузер болон бусад бүх холбогдох тунгалаг эд хөрөнгийг ашиглаж байна - тунгалаг, энэ нь 0-ээс 1, шүүлтүүр харилцан адилгүй байдаг.

Ил тод байдал Image (өөрчлөлт)

нь та зүйлийг зөөж байх үед нь ил тод гарч ирэх болно тохируулгуудтай эхэлье хулгана чирч байна.

АНУ-ын дүр төрх ил тод байдлыг хэрхэн зааж өгөх авч үзье. CSS хоёр сонголтыг санал болгож байна. Үүнийг хийхийн тулд та үүнийг шууд код нь HTML-баримт бичигт дараах байдлаар бүртгэнэ ёстой:

1. Зургийн замыг зааж өгнө.
2. заагч биш юм үед бид ил тод байдлын үзүүлэлтүүдийг тодорхойлдог. Үүнийг хийхийн тулд бид onmouseover болон onmouseout, тунгалаг болон шүүлтүүрийн үнэ цэнийг тодорхойлсон шинж чанарыг ашигладаг.

ижил шинж чанар нь CSS-баримт бичиг, энэ нь лавлагаа нэмэх эх кодод заасан болно. үр дүн нь ижил гарч эргэж.

текст болон хуудасны блок ил тод байдал

бичвэр буюу блок (ил тод DIV) нь CSS түүний сонголт, ил тод дүр төрхийг бий болгох төстэй санал болгодог учраас та холбогдсон CSS-файлыг нь хүссэн үзүүлэлтүүдийг тогтоосон ашиглах хэрэгтэй. Та явж, хялбар арга зам болно. Та загварын блок DIV хэв маяг тохируулах, эсвэл текст р onmouseover болон элемент onmouseout дараах HTML кодыг тодорхойлоход хэрэгтэй. Аль аль нь сонголт ажиллаж, хүссэн үр дүнг гаргаж байна.

ил тод тогтмол

Зарим тохиолдолд, объектын ил тод байдал, дизайн элемент буюу бичвэр та байнга тогтоосон байна. Энэ тохиолдолд, шийдэл нь та хулганы курсорыг хулганыг аваачиж байх үед бүр илүү хялбар байдаг.

ил тод байдал CSS элемент дараах кодоор өгсөн болно. блок DIV хэв маяг нь цаана нь (жишээ нь: # ff8800), гэрэл үл (жишээ нь, 0.5) болон өргөн (өргөн) болон жийрэглэх (дүүрэн) утгуудыг зааж.

Зургийн хувьд код нь утга гаргах бөгөөд тунгалаг шүүлтүүр, болон дүрс хүрэх замыг зааж өгөх хэрэгтэй.

RGBA-арга

ил тод байдал ямар ч загвар элементийн үндсэн өнгө хэрэглэж болно: энэ үл хөдлөх хөрөнгийн CSS ашиглан бусад тохируулгууд байдаг. Энэ нь RGBA аргыг ашигладаг. Alpha, ил тод байдлын түвшинг заадаг - эхний гурван үсэг үндсэн өнгө (улаан, хуваах, цэнхэр), сүүлийн төлөө зогсож байна. RGBA-форматыг ашиглан сүүлийн оронтой тоо руу орж үүнийг зааж, ил тод байдлыг тодорхойлно. Жишээ нь, тэрчлэн: СУУРЬ ОЙЛГОЛТ: rgba (240,2,33,0.4035).

дүгнэлт

Тиймээс сайтын загвар нь энгийн боловч үр дүнтэй онцлог нь CSS "ил тод байдал" сэдэвт ажлын явцад ашиглан, та илүү сонирхолтой, илүү мэдэгдэхүйц бага хүчин чармайлт нь элементүүд хийж болно. тайлбарласан embodiments өөрчлөн ил тод онцлог энэ нь танд туслах болно юм.