Даведайцеся аб 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;
-moz-непразрыстасць: 0,5;
Непразрыстасць: 0,5;

Заўсёды апранайце прэфіксы браўзэраў першымі, і сапраўднае ўласцівасць CSS3 апошняга.

Праверце прэфіксы браўзэраў у старых Mozilla і Webkit браўзэраў.

Вы можаце зрабіць малюнкі празрыстымі

Усталюйце непразрыстасць на само малюнак і яно будзе знікаць ў фонавым рэжыме. Гэта сапраўды карысна для фонавых малюнкаў .

А калі дадаць у якарнага тэг можна стварыць пры навядзенні курсора мышы эфект толькі за кошт змянення празрыстасці малюнка.

а: завісаць IMG {
Фільтр: альфа (непразрыстасць = 50)
Фільтр: ProgID: DXImageTransform.Microsoft.Alpha (Непразрыстасць = 50)
-moz-непразрыстасць: 0,5;
-webkit-непразрыстасць: 0,5;
Непразрыстасць: 0,5;
}

Ўплывае гэты HTML:

Праверце названыя вышэй стылі і HTML у дзеянні.

Змесціце тэкст на малюнках

З непразрыстасцю, вы можаце змясціць тэкст па-над малюнка і маеце малюнка з'яўляецца паступова знікаць, дзе гэты тэкст.

Гэтая тэхніка крыху больш складана, таму што вы не можаце проста знікаць малюнак, так як гэта будзе знікаць увесь малюнак. І вы не можаце знікаць тэкставае поле , таму што тэкст будзе знікаць там.

1. Спачатку неабходна стварыць кантэйнер DIV і змясціць малюнак ўнутры:

   
   

2. Выконвайце малюнак з пустой DIV -Гэты з'яўляецца тое, што вы будзеце рабіць празрыстымі.

   
   
   

3. Апошняе, што вы дадаеце ў ваш HTML з'яўляецца DIV з тэкстам у ёй:

   
   
   
   Гэта мой сабака шась. Хіба ён не міла!

4. Вы стылізаваць з пазіцыянаваннем CSS, каб змясціць тэкст над малюнкам. Я паклаў тэкст на левай баку, але вы можаце паставіць яго на права шляхам змены двух левых: 0; ўласцівасці направа: 0; ,

   #image {
   пазіцыя: адносная;
   шырыня: 170 пікселяў;
   вышыня: 128px;
   Маржа: 0;
   }
   #text {
   пазіцыя: абсалютная;
   верх: 0;
   Злева направа: 0;
   шырыня: 60px;
   вышыня: 118px;
   фон: #fff;
   абіўка: 5px;
   }
   #text {
   Фільтр: альфа (непразрыстасць = 70);
   Фільтр: ProgID: DXImageTransform.Microsoft.Alpha (Непразрыстасць = 70);
   -moz-непразрыстасць: 0,70;
   Непразрыстасць: 0,7;
   }
   #words {
   пазіцыя: абсалютная;
   верх: 0;
   Злева направа: 0;
   шырыня: 60px;
   вышыня: 118px;
   фон: празрысты;
   абіўка: 5px;
   }

Паглядзіце, як гэта выглядае