Энэ хичээлээр бид дараах CSS шинж чанаруудыг авч үзэх болно - тунгалаг байдал ба RGBA. Opacity шинж чанар нь зөвхөн элементүүдийн ил тод байдлыг хариуцдаг бөгөөд хэрэв та альфа сувгийн ил тод байдлын утгыг зааж өгсөн бол RGBA функц нь өнгө, ил тод байдлыг хариуцна.

CSS-ийн ил тод байдал Тунгалаг байдал

Тунгалаг байдлын дижитал утгыг 0.0-оос 1.0 хооронд тохируулсан бөгөөд тэг нь бүрэн ил тод байдал, нэг нь эсрэгээрээ үнэмлэхүй тунгалаг байдал юм. Жишээлбэл, 50% ил тод байдлыг харахын тулд та утгыг 0.5 болгох хэрэгтэй. Тунгалаг байдал нь бүх зүйлд хамаатай гэдгийг санах хэрэгтэй хүүхдийн элементүүдэцэг эх. Энэ нь тунгалаг дэвсгэр дээрх текст мөн тунгалаг байх болно гэсэн үг юм. Энэ бол маш чухал сул тал бөгөөд текст нь тийм ч сайн харагдахгүй байна.

CSS Opacity-ээр дамжуулан ил тод байдал

Хар текст цэнхэр дэвсгэр шиг тунгалаг болсон нь дэлгэцийн агшинд тод харагдаж байна.

Див (
дэвсгэр: url (зураг/таны дүрс.jpg); /* Арын зураг */
өргөн: 750px;
өндөр: 100px;
захын зай: автомат;
}
.цэнхэр(
дэвсгэр: #027av4; /* Өнгө тунгалаг дэвсгэр */
тунгалаг байдал: 0.3; /* дэвсгэрийн тунгалаг байдлын утга */
өндөр: 70px;
}
h1 (
дүүргэх: 6px;
font-family: Arial Black;
үсгийн жин: илүү тод;
үсгийн хэмжээ: 50px;
}

RGBA формат дахь CSS ил тод байдал

RGBA өнгөний формат нь тунгалаг байдлын шинж чанараас илүү орчин үеийн хувилбар юм. R (улаан), G (ногоон), B (цэнхэр) - улаан, ногоон, цэнхэр гэсэн утгатай. Сүүлийн А үсэг нь альфа сувгийг илэрхийлдэг бөгөөд энэ нь ил тод байдлыг тогтоодог. RGBA нь Opacity-ээс ялгаатай нь хүүхдийн элементүүдэд нөлөөлдөггүй.

Одоо RGBA ашиглан жишээгээ харцгаая. Загварын хувьд эдгээр мөрүүдийг сольж үзье.

Суурь мэдээлэл: ##027av4; /* Дэвсгэр өнгө */
тунгалаг байдал: 0.3; /* дэвсгэр тунгалаг байдлын утга */

дараагийн нэг мөрөнд

Үндсэн мэдээлэл: rgba(2, 127, 212, 0.3);

Таны харж байгаагаар ил тод байдлын утга 0.3 нь хоёр аргын хувьд ижил байна.

RGBA жишээний үр дүн:

Хоёр дахь дэлгэцийн агшин эхнийхээс хамаагүй дээр харагдаж байна.

Блокны дэвсгэрийн тунгалаг байдлыг ашиглан та вэбсайт дээрээ сонирхолтой эффектүүдийг олж авах боломжтой. Эдгээр тунгалаг блокууд нь гэрэл зураг гэх мэт өнгөлөг дизайн дээр байрлах нь чухал юм. Зөвхөн энэ тохиолдолд үр нөлөө нь мэдэгдэхүйц байх болно. Энэ техникийг дизайнд удаан хугацаагаар ашиглаж ирсэн бөгөөд ямар ч CSS3 гарч ирэхээс өмнө үүнийг зөвхөн график программд хэрэгжүүлсэн.

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

.цэнхэр (
дэвсгэр: rgba(0, 120, 201, 0.3);
шүүлтүүр: альфа(Тунгалаг байдал=30); /* IE дахь ил тод байдал */
}

Дүгнэлт

RGBA форматыг Internet Explorer-ээс бусад бүх орчин үеийн хөтчүүд дэмждэг. RGBA нь уян хатан байх нь маш чухал бөгөөд энэ нь зөвхөн тодорхой өгөгдсөн элемент дээр ажилладаг бөгөөд хүүхдүүдэд нөлөөлөхгүй. Энэ нь зохион бүтээгчийн хувьд илүү тохиромжтой гэдэг нь тодорхой байна. Миний сонголт бол CSS-ийн ил тод байдлыг хангахын тулд RGBA форматыг дэмжих нь гарцаагүй.

Материалыг илүү сайн нэгтгэх, илүү тодорхой болгохын тулд би танд үүнийг үзэхийг санал болгож байна.

orem Ipsum бол хэвлэх, хэвлэх үйлдвэрийн хуурамч текст юм. Лорем Ипсум нь 1500-аад оноос хойш үл мэдэгдэх хэвлэгч нь галлерейг авч, хэвлэмэл ном бүтээхээр шифрлэснээс хойш энэ салбарын стандарт дамми текст байсаар ирсэн. Энэ нь зөвхөн таван зуун жилийн турш төдийгүй цахим бичгийн хэвлэх үсрэлтийг ч даван туулж чадсан юм. Энэ нь 1960-аад онд Lorem Ipsum-ийн хэсгүүдийг агуулсан Letraset хуудаснууд болон саяхан Aldus PageMaker гэх мэт ширээний хэвлэлийн программ хангамжууд, үүнд Lorem Ipsum-ийн хувилбаруудыг оруулснаар алдартай болсон.
Уншигч хуудасны зохион байгуулалтыг үзэхдээ унших боломжтой агуулгад анхаарлаа сарниулах нь эрт дээр үеэс батлагдсан баримт юм. Lorem Ipsum-ийг ашиглахын утга учир нь "Агуулга энд, контент энд" гэсэн үгнээс ялгаатай нь үсгийн хэвийн тархалттай, уншихад хялбар англи хэл шиг харагдуулдаг. Олон ширээний хэвлэлийн багцууд болон вэб хуудас засварлагчид одоо Lorem Ipsum-ийг үндсэн загвар текст болгон ашиглаж байгаа бөгөөд "lorem ipsum" гэж хайлт хийснээр эхэн үедээ байгаа олон вэб сайтууд нээгдэх болно. Олон жилийн туршид янз бүрийн хувилбарууд нь заримдаа санамсаргүй байдлаар, заримдаа зориудаар (тарилгын хошигнол гэх мэт) хөгжиж ирсэн.

Тиймээс өнөөдөр бид html хуудасны ил тод байдлын талаар ярих болно. Зарим алдартай вэб сайтын зургийн галерей эсвэл нэвтрэх маягт гэх мэт ил тод попап блокуудтай таарсан байх. HTML дээр ил тод байдлын олон хэрэглээ байдаг. Тэгэхээр үүнийг хэрхэн хийж, хаана ашиглаж болох вэ?

Юуны өмнө манай баримт бичиг нь зөвхөн нэг дэлгэцийн хавтгай биш гэдгийг ойлгоцгооё - энэ нь ерөнхийдөө 3 хэмжээст, би үүнийг "Z-индекс" нийтлэлд дурдсан. Үүний дагуу бүрэн ил тод давхарга ч гэсэн дэлгэцийн стекийн дээд талд байсан бол бусад элементүүдэд хандах хандалтыг хаах болно. Энэ нь тунгалаг блокуудын үндсэн хэрэглээний нэг юм. Хэдийгээр сүүдэрлэх нөлөөг ихэвчлэн ашигладаг боловч бүрэн ил тод давхарга нь яг адилхан ажиллах болно. Жишээлбэл, маш олон алдартай зургийн галерей ажилладаг бөгөөд сүүдэрт давхаргыг зохион байгуулж, гэрэл зураг, тэдгээрийн удирдлагыг харуулдаг. Хуудасны үлдсэн хэсэг нь (хагас) тунгалаг давхаргаар "бүрхэгдсэн" бөгөөд энэ нь хуудасны бусад бүх элементүүдэд нэвтрэх боломжийг хаадаг. Тэдгээр. Та хуудасны аль нэг холбоос дээр дарснаар хуудаснаас гарах боломжгүй болно - бүх текст дэвсгэр дээр хучигдсан байдаг. Сайтын үндсэн хэсэг рүү буцахын тулд тэд ихэвчлэн галерейг хаах, нэвтрэх маягт гэх мэт хяналтыг өгдөг. Javascript ашиглан ил тод блокуудыг харуулах/нуухыг удирдах. Харамсалтай нь үүнээс өөр арга байхгүй. Үүнийг ашиглахгүйгээр хэрэглэгч ил тод блокыг огт харахгүй, эсвэл одоогийн хуудаснаас гарахгүйгээр хаах боломжгүй болно. Үүнд харагдах байдал эсвэл дэлгэцийн шинж чанаруудыг ашигладаг болохыг анхаарна уу.

Тэгэхээр html дээр ил тод байдлыг хэрхэн зохион байгуулдаг вэ? Элементийн ил тод байдлыг тохируулах нь ерөнхийдөө CSS-ийн тодорхойлолтод ороогүй тул үүнийг үүсгэхийн тулд та хэд хэдэн зааврыг нэгэн зэрэг ашиглах хэрэгтэй. Зарим хөтөч (өөрөөр хэлбэл) нэг сонголттой, бусад нь өөр сонголттой ажиллах болно. Өөрөөр хэлбэл, суурилуулсан шүүлтүүрийн функцийг ашигладаг бол бусад хөтөч нь 0 (бүрэн ил тод объект) -ээс 1 (бүрэн тунгалаг) хооронд тохируулагдсан "тунгалаг байдал" шинж чанарыг ашигладаг. Жишээлбэл, 30% ил тод байх тохиолдолд та "тунгалаг байдал:0.30; шүүлтүүр:альфа(тунгалаг байдал=30);" гэж бичих хэрэгтэй. Жишээнээс харахад шинж чанарууд нь ижил төстэй байдаг - зөвхөн эхний тохиолдолд 0-ээс 1 хүртэлх тоог ашигладаг, хоёрдугаарт хувийн тэмдэглэгээг ашигладаг. Ийм блокийн жишээ: