Дознајте за проѕирноста на CSS3

Изработка на вашите позадини транспарентни

Една од работите што можете лесно да ги направите во дизајнот за печатење, но не и на Интернет, е преклопен текст на сликата или обоена позадина и ја менувате транспарентноста на таа слика, така што текстот ќе исчезнат во позадина. Но, постои имот во CSS3 кој ќе ви овозможи да ја смените непроѕирноста на вашите елементи, така што тие ќе исчезнат и ќе исчезнат: непроѕирноста.

Како да го искористите сопственоста на непроѕирноста

Сопственоста на непроѕирност ја зема вредноста на висината на транспарентност од 0.0 до 1.0.

0.0 е 100% транспарентен - нешто под тој елемент ќе се прикаже целосно. 1.0 е 100% нетранспарентно - ништо под елементот нема да се покаже.

Значи, да поставите елемент на 50% транспарентен, ќе напишете:

непроѕирност: 0,5;

Видете неколку примери на непроѕирност во акција

Бидете сигурни да ги тестирате постарите прелистувачи

Ни IE 6 ниту 7 не поддржуваат CSS3 непроѕирност на имотот. Но, ти не си од среќа. Наместо тоа, IE поддржува алфа-филтер за сопственост на Microsoft. Алфа-филтри во IE прифаќаат вредности од 0 (целосно транспарентен) до 100 (целосно матна). Значи, за да ја добиете вашата транспарентност во IE, треба да ја размножите вашата непроѕирност за 100 и да додадете алфа-филтер на вашите стилови:

филтер: алфа (непроѕирност = 50);

Погледнете го алфа филтерот во акција (само IE)

И Користете префикси на прелистувачот

Треба да ги користите -moz- и -webkit-префиксите така што постарите верзии на Mozilla и Webkit прелистувачите исто така го поддржуваат:

-webkit-непроѕирност: 0,5;
-моз-проѕирност: 0,5;
непроѕирност: 0,5;

Секогаш прво стави префикси на прелистувачот и важи вистинскиот CSS3 имот.

Тестирајте ги префиксите на прелистувачот во постарите прелистувачи на Mozilla и Webkit.

Можете да направите слики транспарентни премногу

Поставете ја непроѕирноста на самата слика и таа ќе исчезнат во позадина. Ова е навистина корисно за сликите во позадина .

И ако додадете во ознака за сидро, можете да создадете ефекти на лебди само со менување на непроѕирноста на сликата.

a: hover img {
филтер: алфа (непроѕирност = 50)
филтер: проследен: DXImageTransform.Microsoft.Alpha (непроѕирност = 50)
-моз-проѕирност: 0,5;
-webkit-непроѕирност: 0,5;
непроѕирност: 0,5;
}

Влијае на овој HTML:

Ги тестира горенаведените стилови и HTML во акција.

Ставете текст на вашите слики

Со непроѕирност, можете да поставите текст над некоја слика и да се појави сликата за да исчезне каде е тој текст.

Оваа техника е малку незгодно, бидејќи не можете едноставно да ја исчезнат сликата, бидејќи тоа ќе ја снема целата слика. И не можете да го избришите полето за текст , бидејќи текстот ќе исчезнат и таму.

1. Прво креирате сад DIV и ставете ја вашата слика внатре:

   
   

2. Следете ја сликата со празен DIV - тоа е она што ќе направите транспарентно.

   
   
   

3. Последното нешто што го додавате во вашиот HTML е DIV со вашиот текст во него:

   
   
   
   Ова е моето куче Шаста. Зар не е симпатичен!

4. Го стилизирате со позиционирање на CSS, за да го поставите текстот над сликата. Го ставив мојот текст на левата страна, но можете да го поставите десно со менување на две лево: 0; својства на десно: 0; .

   #image {
   позиција: роднина;
   Ширина: 170px;
   висина: 128px;
   маргина: 0;
   }
   #text {
   позиција: апсолутна;
   нагоре: 0;
   лево: 0;
   Ширина: 60px;
   висина: 118px;
   позадина: #fff;
   Соочувајќи се: 5px;
   }
   #text {
   филтер: алфа (непроѕирност = 70);
   филтер: проследен: DXImageTransform.Microsoft.Alpha (непроѕирност = 70);
   -moz-непроѕирност: 0,70;
   непроѕирност: 0,7;
   }
   #зборови {
   позиција: апсолутна;
   нагоре: 0;
   лево: 0;
   Ширина: 60px;
   висина: 118px;
   позадина: транспарентна;
   Соочувајќи се: 5px;
   }

Погледнете како изгледа