CSS3-ийн тухай буруу ойлголттой болох

Өөрийнхөө зургийг ил тод болгох

Таны хэвлэх загварт хялбархан хийдэг зүйлсийн нэг нь Вэб дээр биш харин дүрс эсвэл өнгөт дэвсгэр дээр текстийг давхарлаж, текстийг ар талд далдлав. Гэхдээ CSS3- ийн шинж чанарууд нь элементүүдийн үл ойлгогдох байдлыг өөрчлөх боломжийг танд олгоно.

Ойрын үед үл хөдлөх хөрөнгийг хэрхэн ашиглах талаар

Ил тод байдал нь 0.0-оос 1.0 хүртэлх ил тод байдлын утгыг авдаг.

0.0-ээс 100% ил тод, энэ элемент бүрэн хэмжээгээр харагдахаас доогуур юм. 1.0 нь 100% тунгалаг бус элементээс доош харагдах болно.

Тэгэхээр элементийг 50% ил тод болгохын тулд та бичих болно:

opacity: 0.5;

Үйлдлийн харанхуй байдлын зарим жишээг үзнэ үү

Хуучны Browsers-т туршиж үзэх нь зүйтэй

IE 6 эсвэл 7 нь CSS3 хувилбарын үл хөдлөх хөрөнгийг дэмждэггүй. Гэхдээ чи амжилтанд хүрээгүй. Харин IE нь Microsoft-ийн зөвхөн өмчийн альфа шүүлтүүрийг дэмждэг. IE дээрх Alpha шүүлтүүрүүд нь 0-ээс (бүрэн ил тод) 100 хүртэлх (бүрэн тунгалаг биш) утгыг хүлээн авдаг. Тиймээс IE-ийн ил тод байдлыг олж авахын тулд та өөрийн алдаагаа 100-оор үржүүлж, альфа шүүлтүүрийг өөрийн стильд нэмэх хэрэгтэй:

Шүүлтүүр: alpha (opacity = 50);

Альфа шүүгчийг үйлдлээр (зөвхөн IE) харах

Мөн Хөтөчний Нөөцийг ашигла

Mozilla болон Webkit хөтчүүдийн хуучин хувилбарууд үүнийг дэмждэг тул та -moz- ба -webkit -н угтваруудыг ашиглах ёстой:

-webkit-opacity: 0.5;
-moz-гэрэлтүүлэг: 0.5;
opacity: 0.5;

Эхлээд хөтөчийн угтваруудыг байнга хийдэг бөгөөд CSS3 өмчийн зүйл нь сүүлийнх байна.

Хуучин Mozilla болон Webkit хөтөч дээр хөтчийн угтваруудыг туршиж үзээрэй.

Та илүү ил тод зураг зурж чадна

Зурган дээрх үл үзэмжийг тохируулаарай. Энэ нь ар талдаа алга болно. Энэ нь арын зургуудад үнэхээр ашигтай.

Хэрэв та зангуундаа нэмэх бол зурагны харагдах байдлыг өөрчлөх замаар hover нөлөөг үүсгэж болно.

a: hover img {
Шүүлтүүр: alpha (opacity = 50)
шүүлтүүр: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-гэрэлтүүлэг: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

Энэ HTML-д нөлөөлдөг:

Дээрх загвар болон HTML-г үйлдлээр шалгах.

Өөрийн зураг дээр текст оруулах

Ил тод байдалгүйгээр та текст дээр текст байрлуулж, текст хаана байгааг дүрсэлж харуулах болно.

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

1. Эхлээд та контейнер DIV үүсгээд дотор нь байрлуулна:

   
   

2. Хоосон DIV-тэй дүрсийг дагана уу. Энэ нь ил тод болгох болно.

   
   
   

3. Таны HTML-д хамгийн сүүлд орсон зүйл бол таны тексттэй DIV байна:

   
   
   
   Энэ бол миний нохой Шаста. Тэр хөөрхөн биш үү?

4. CSS дээр байршуулахдаа зургийн дээрх текстийг байрлуул. Би зүүн талын текстийг байрлуулсан, гэхдээ та зүүн талдаа үлдсэнийг нь баруун талд тавьж болно: 0; баруун тийш өмч: 0; .

   #image {
   албан тушаал: харьцангуй;
   өргөн: 170px;
   өндөр: 128px;
   margin: 0;
   }
   #text {
   албан тушаал: үнэмлэхүй;
   дээд: 0;
   зүүн: 0;
   өргөн: 60px;
   өндөр: 118px;
   background: #fff;
   padding: 5px;
   }
   #text {
   Шүүлтүүр: alpha (opacity = 70);
   шүүлтүүр: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   # нууц үг {
   албан тушаал: үнэмлэхүй;
   дээд: 0;
   зүүн: 0;
   өргөн: 60px;
   өндөр: 118px;
   суурь мэдээлэл: ил тод;
   padding: 5px;
   }

Харагдах байдлыг хар