CSS дээр ил тод эффект үүсгэхийн тулд тунгалаг байдлын шинж чанарыг ашигладаг.

IE8 болон өмнөх хувилбарууд нь өөр шинж чанарыг дэмждэг - filter:alpha(opacity=x) , энд " x" нь 0-ээс 100 хооронд хэлбэлзэж болно, утга бага байх тусам элемент илүү ил тод байх болно.

Бусад бүх хөтчүүд нь 0.0-ээс 1.0 хүртэлх тоог утга болгон авч болох стандарт CSS шинж чанарын тунгалаг байдлыг дэмждэг бөгөөд утга бага байх тусам элемент илүү ил тод байх болно:

Оролдоод үз »

Хүрээлэн дээр ил тод байдал

Pseudo-class: hover нь танд өөрчлөх боломжийг олгоно гадаад төрхэлементүүд дээр хулганы курсорыг гүйлгэхэд. Бид энэ функцийг ашиглан зураг дээр хулганыг аваачихад ил тод байдлаа алдах болно:

Оролдоод үз »

Арын дэвсгэрийн ил тод байдал

Хоёр байна боломжит арга замуудЭлементийг ил тод болгох: дээр дурдсан тунгалаг байдлын шинж чанар ба дэвсгэр өнгийг RGBA форматаар зааж өгөх.

Та RGB өнгөт дүрслэлийн загварыг аль хэдийн мэддэг байж магадгүй. RGB (Улаан, Ногоон, Цэнхэр - улаан, ногоон, цэнхэр) нь улаан, ногоон, цэнхэр холих замаар өнгийг тодорхойлдог өнгөт систем юм. Жишээлбэл, текстийн өнгийг шар болгохын тулд та дараах мэдэгдлүүдийн аль нэгийг ашиглаж болно.

Өнгө: rgb(255,255,0); өнгө: rgb (100%, 100%, 0);

RGB ашиглан тодорхойлсон өнгө нь өөр байх болно арван зургаатын тоо, бид өмнө нь хэрэглэж байсан бөгөөд тэдгээр нь бидэнд ил тод байдлын альфа сувгийг ашиглах боломжийг олгодог. Энэ нь альфа тунгалаг элементийн арын дэвсгэр дээр түүний доор байрлах зүйл харагдах болно гэсэн үг юм.

RGBA өнгийг зарлах нь синтаксийн хувьд стандарт RGB дүрмүүдтэй төстэй юм. Гэсэн хэдий ч бид мөн утгыг RGBA (RGB-ийн оронд) гэж зарлаж, 0.0 (бүрэн ил тод) ба 1 (бүрэн тунгалаг) хооронд өнгөний утгын дараа аравтын бутархай ил тод байдлын нэмэлт утгыг зааж өгөх шаардлагатай болно.

Өнгө: rgba(255,255,0,0,5); өнгө: rgba (100%, 100%, 0,0.5);

Тунгалаг байдлын шинж чанар болон RGBA шинж чанаруудын ялгаа нь тунгалаг байдлын шинж чанар нь бүхэл бүтэн элементэд ил тод байдлыг ашигладаг бөгөөд энэ нь элементийн бүх агуулга ил тод болно гэсэн үг юм. Мөн RGBA нь элементийн бие даасан хэсгүүдэд (жишээлбэл, зөвхөн текст эсвэл дэвсгэр) ил тод байдлыг тохируулах боломжийг олгодог.

Үндсэн хэсэг (арын дэвсгэр зураг: url(img.jpg); ) .prim1 (өргөн: 400px; захын зай: 30px 50px; дэвсгэр өнгө: #ffffff; хүрээ: 1px хатуу хар; үсгийн жин: тод; тунгалаг байдал: 0.5; шүүлтүүр : alpha(тунгалаг байдал=70); /*IE8 ба түүнээс өмнөх хувилбаруудад*/ text-align: center .prim2 (өргөн: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); хүрээ: 1px хатуу; font-weight: bold text-align: center ) үзээрэй »

Тайлбар: RGBA утгыг IE8 болон түүнээс өмнөх хувилбаруудад дэмждэггүй. Альфа өнгөний утгыг дэмждэггүй хуучин хөтчүүдийн нөөц өнгийг зарлахын тулд эхлээд RGBA утгын өмнө үүнийг зааж өгөх хэрэгтэй: background: rgb(255,255,0); дэвсгэр: rgba(255,255,0,0,5);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дүгнэлт

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

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

Сайн уу. Та мэдэж байгаагаар арын дэвсгэр нь арын дэвсгэрийн өнгө тохируулах эсвэл зураг ачаалах боломжийг олгодог CSS шинж чанар юм. CSS3 нь шугаман болон радиаль градиент үүсгэх чадварыг танилцуулсан боловч энэ бол өөр нийтлэлийн сэдэв юм. Энэ нийтлэлд би CSS-ийн дэвсгэр шинж чанарын ил тод байдлыг хэрхэн тохируулахыг танд хэлэхийг хүссэн.

CSS дэвсгэрийн ил тод байдлыг тохируулна уу

Тиймээс энэ бүхэн нь rgba гэх мэт өнгөт бичлэгийн форматын ачаар маш энгийнээр хийгддэг. Хэрэв та хамтран ажиллаж байгаа бол график редакторууд, тэгвэл та үүнийг мэдэж байгаа байх өнгөт горим rgb гэдэг нь улаан (улаан), ногоон (ногоон) ба хөх (цэнхэр) өнгөний хувь хэмжээг илэрхийлнэ. Тиймээс, rgba нь бараг ижил, зөвхөн нэг параметр нэмэгдсэн - ил тод байдал. Үүнийг ингэж бичсэн байна.

Арын өнгө: rgba(173, 57, 22, 0.5)

Эхлээд бид rgba горимд өнгийг тохируулж байгааг тодорхой зааж өгсөн. Дараа нь бид гурван үндсэн өнгөний ханалтын утгыг 0-ээс 255 хүртэл зааж өгдөг бөгөөд 255 нь хамгийн өндөр ханалт юм. Дөрөв дэх үзүүлэлт бол бидний ил тод байдал. 0-ээс нэг хүртэлх утгыг энд бичнэ. 1 нь бүрэн тунгалаг элемент бөгөөд 0 нь бүрэн ил тод элемент юм. Үүний дагуу, хэрэв та үүнийг 0 болгож тохируулбал дэвсгэр өнгө нь огт харагдахгүй болно.

Одоо та CSS дээр арын шинж чанарыг хэрхэн ил тод болгохыг мэддэг болсон. Үүнийг хийхийн тулд та rgba өнгөний горимыг ашиглах хэрэгтэй. Мөн тунгалаг байдлын шинж чанар байдаг боловч энэ нь бүхэлдээ бүхэл бүтэн элементэд хамаарна. Өөрөөр хэлбэл, тунгалаг байдлыг хэрэглэх үед ил тод байдлыг текстэд хэрэглэж, унших боломжгүй болгодог.

Ил тод дэвсгэр жишээ

Тунгалаг дэвсгэрийн давуу талыг жишээгээр харуулахад хялбар байдаг. Жишээлбэл, бид хуудасны ерөнхий дэвсгэртэй. Хэрэв блок нь хатуу хар өнгөтэй болвол иймэрхүү харагдах болно.

Одоо блок дээр ижил хар өнгийг тохируулъя, гэхдээ rgba өнгөний форматыг ашиглан хамгийн сүүлийн утгыг 0.7 гэж зааж өгнө үү. Энэ нь дараах байдлаар гарах болно.
Одоо блокны дэвсгэр нь тунгалаг болж, түүгээр харагдана дэвсгэр зураг. Энэ зураг болон дэвсгэр нь зөвхөн жишээ юм. Таны төсөөлж байгаачлан, css-ийн дэвсгэрийн ил тод байдал нь бусад давхарга дээр байрлах бусад дэвсгэрийг халхлахгүйгээр үүрлэсэн элементийн арын дэвсгэрийг харуулахыг хүсвэл хэрэг болно.

Rgba ашиглан өнгийг өөрөө тохируулах нь тийм ч хэцүү биш юм. Өмнө дурьдсанчлан эхний гурван үсэг нь улаан, ногоон, цэнхэр гэсэн гурван үндсэн өнгө, эс тэгвээс тэдгээрийн эзлэх хувь (0-ээс 255 хүртэл) гэсэн үг юм. Өөр өөр утгыг тохируулснаар та сая сая өөр өнгийг авах боломжтой бөгөөд тунгалаг байдал нь шаардлагатай бол сайтын хувьд илүү үзэсгэлэнтэй эффектүүдийг гаргах боломжийг олгоно.

CSS-ийн ил тод байдал - хөтөч хоорондын шийдэл - 6 саналын үндсэн дээр 5-аас 3.8

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

Аливаа элементийн ил тод байдлыг хэрхэн тохируулах вэ

CSS3-д тунгалаг байдлын шинж чанар нь аливаа элементэд хэрэглэж болох тунгалаг элементүүдийг үүсгэх үүрэгтэй. Энэ өмч нь ил тод байдлын түвшинг тодорхойлдог 0-ээс 1 хүртэлх утгатай. Энд 0 нь бүрэн ил тод байдал (бүх элементийн анхдагч утга), 1 нь бүрэн тунгалаг байдал юм. Утгыг бутархай хэлбэрээр бичнэ: 0.1, 0.2, 0.3 гэх мэт.

Хэрэглээний жишээ:

Хөтөч хоорондын ил тод байдал

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

Дараах харагдац нь CSS3 тунгалаг байдлын шинж чанарыг дэмждэг Mozilla хөтчүүд 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Маш сайн :) Internet Explorer шиг 9.0 хувилбар хүртэлх хөтөч нь тунгалаг байдлын шинж чанарыг дэмждэггүй бөгөөд энэ хөтөчийг ил тод болгохын тулд шүүлтүүрийн шинж чанар болон X нь бүхэл тоо болох alpha(Opacity=X) утгыг ашиглах шаардлагатай. ил тод байдлын түвшинг тодорхойлдог 0-ээс 100 хүртэлх муж. 0 нь бүрэн ил тод, 100 нь бүрэн тунгалаг байна.

талаар Firefox хөтөч 3.5 хувилбараас өмнө энэ нь тунгалаг байдлын оронд -moz-opacity шинж чанарыг дэмждэг.

KHTML хөдөлгүүр дээр бүтээгдсэн Safari 1.1, Konqueror 3.1 зэрэг хөтчүүд ил тод байдлыг хянахын тулд -khtml-opacity шинж чанарыг ашигладаг.

Бүх хөтөч дээр ижил харагдахын тулд CSS-ийн ил тод байдлыг хэрхэн тохируулах вэ? Элементийн ил тод байдлын хөтч хоорондын шийдлийг бий болгохын тулд тэд зөвхөн нэг тунгалаг байдлын шинж чанарыг төдийгүй дараах шинж чанаруудыг зааж өгөх шаардлагатай.

шүүлтүүр: альфа(Тунгалаг байдал=50); /* IE-д зориулсан ил тод байдал */ -moz-opacity: 0.5; /* Mozilla 3.5 ба түүнээс доош хувилбаруудыг дэмждэг */ -khtml-opacity: 0.5; /* Konqueror 3.1 болон Safari 1.1-ийг дэмждэг */ тунгалаг байдал: 0.5; /* Бусад бүх хөтчүүдийг дэмждэг */

Төрөл бүрийн элементүүдийн ил тод байдал

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

CSS зургийн ил тод байдал.

Тунгалаг зураг үүсгэх хэд хэдэн сонголтыг авч үзье. Дараах жишээнд эхний зурагт ил тод байдлын тохиргоо байхгүй, хоёр дахь нь 50%, гурав дахь нь 30% ил тод байна.

Үр дүн:

Зурган дээр гүйлгэх үед CSS-ийн ил тод байдал.

Курсор түүн дээр эргэлдэж байх үед зураг эсвэл бусад элементийг ил тод болгох шаардлагатай байдаг. Та үүнийг CSS pseudo-class:hover ашиглан хийж болно. Үүнийг хийхийн тулд бидний зургийг хоёр анги, нэг хэвийн гэсэн ангилалд оруулах шаардлагатай - энэ нь зургийн идэвхгүй байдал, псевдо ангитай хоёрдугаар анги байх болно: хулганаа аваач, яг одоо та зургийн ил тод байдлыг зааж өгөх хэрэгтэй. курсорыг гүйлгэхэд.

Та демо дээр үр дүнг харж болно.

CSS ашиглан дэвсгэрийн ил тод байдал.

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

Жишээ болгон бид зураг ашиглан үүсгэсэн хуудасны дэвсгэртэй хувилбарыг, өнгө ашиглан бүтээсэн дэвсгэртэй блокыг 50% тунгалаг байдлаар өгөх болно.

Жишээ код:

Дээр байрлуулсан кодын үр дүн энд байна:

Сайн байцгаана уу. Өнөөдөр би CSS дээр ил тод өнгө хэрхэн тохируулахыг танд хэлэх болно. Одоогоор үүнийг хийх 3 арга бий.

Арга 1 - үнэ цэнэ ил тод

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

Өнгө: ил тод;

Ийм текст хуудсан дээр харагдахгүй.

Арга 2 - rgba өнгөний горим

Мөн энэ бол css3 шинэлэг зүйл юм. Өмнө нь вэб хөгжүүлэлтэд ийм горим байгаагүй, зөвхөн rgb байсан. Та энэ форматаар өнгийг хэрхэн яаж бичихээ мэддэг байх. Үүнийг хийхийн тулд та гурван үндсэн өнгөний (улаан, ногоон, цэнхэр) аль нэгнийх нь ханалтыг харуулсан 0-ээс 255 хүртэлх гурван утгыг хаалтанд оруулах шаардлагатай. Жишээ нь:

Үндсэн мэдээлэл: rgb(230, 121, 156);

Rgba формат нь ямар ч ялгаагүй, энэ нь зүгээр л дөрөв дэх утгыг нэмдэг - 0-ээс 1 хүртэлх элементийн ил тод байдлын зэрэг. Ерөнхийдөө энэ бичлэгийн формат нь бүрэн ил тод биш харин тунгалаг өнгийг тохируулахад ашиглагддаг. Бүрэн ил тод байдлыг хангахын тулд 0-ийг дөрөв дэх утга болгон бичихэд хангалттай.

Суурь: rgba(0, 0, 0, 0);

Энэ тохиолдолд үлдсэн 3 орон нь онцгой үүрэг гүйцэтгэдэггүй.

Дөрөв дэх параметрийг 0.01-ээс 0.99 хүртэл утгаар тохируулсан бол тунгалаг өнгийг тохируулж болно. Энэ нийтлэлд би арын дэвсгэрийн тунгалаг байдлыг тохируулах талаар бага зэрэг бичсэн байсан, хэрэв та сонирхож байвал уншиж болно.

Арга 3 - тунгалаг байдал

Css3 технологийн өөр нэг өмч. Гэхдээ энэ нь арай өөрөөр ажилладаг гэдгийг би шууд анхааруулмаар байна. Тунгалаг байдлын үед ил тод байдлыг хэрэглэж буй блок бүхэлд нь тохируулна. Тиймээс текстийг унших чадвар, зургийг ойлгох чадвар мууддаг. Тиймээс би энэ өмчийг зөвхөн текст болон бусад мэдээлэл агуулаагүй блокуудад ашиглах цэгийг харж байна. Rgba форматаар өнгийг зааж өгөхдөө дөрөв дэх параметрийн нэгэн адил утгыг 0-ээс 1 хооронд тохируулж болно.

Ерөнхийдөө, дээр одоогоорЭдгээр нь css дээр ил тод өнгө тохируулах миний мэддэг бүх арга замууд юм. Энэ нь яагаад хэрэгтэй вэ гэдэг өөр асуулт юм. Ил тод дэвсгэрээр доор нь юу байгааг харж болно. Заримдаа дизайнаар ийм байдлаар хийх шаардлагатай болдог. Ерөнхийдөө тунгалаг болгох арга нь өнөөдөр маш түгээмэл байдаг.

Энэ гурван аргын аль нэгийг нь санаж, өөртөө хэрэглээрэй гэж найдаж байна. Энэ бол миний хувьд.