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)

Және шолғыш префикстерін пайдаланыңыз

Mozilla және Webkit браузерлерінің ескі нұсқалары оны қолдайтындай етіп, -moz- және -webkit-префикстерін пайдалануыңыз керек:

-webkit-opacity: 0,5;
-моз-ашықтық: 0,5;
ашықтық: 0,5;

Әрқашан браузер префикстерін алдымен жарамды CSS3 сипатына орналастырыңыз.

Ескі Mozilla және Webkit шолғыштарындағы браузер префикстерін тексеріңіз.

Сіз суреттерді мөлдір ете аласыз

Кескіннің ішіндегі ашықтықты орнатыңыз және ол фонға түседі. Бұл фондық суреттер үшін өте пайдалы.

Егер сіз якорь тегіне қоссаңыз, кескіннің ашықтығын өзгерту арқылы апаратын эффектілерді жасауға болады.

a: hover img {
сүзгі: альфа (ашықтық = 50)
сүзгі: прокси: DXImageTransform.Microsoft.Alpha (opacity = 50)
-моз-ашықтық: 0,5;
-webkit-opacity: 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 (opacity = 70);
   -мез-ашықтық: 0.70;
   мөлдірлігі: 0,7;
   }
   #сөздер {
   лауазымы: абсолютті;
   жоғарғы: 0;
   сол: 0;
   ені: 60px;
   биіктігі: 118px;
   фон: мөлдір;
   толтыру: 5px;
   }

Қараңыз, ол қалай көрінеді