CSS3 ачыктыгы тууралуу билүү

Даярдоо Сиздин Backgrounds Transparent

Сиз жонокой басып дизайн, бирок интернет боюнча алабыз нерселердин бири сүрөттөлүш же түстүү алкагында катмардын текст болуп саналат, ал эми текст экинчи планга жылып, ошондуктан айкелдин ачыктыгын өзгөртүү. Ал эми менчик болгон CSS3 сен үчүн, сенин элементтердин тунуктугун, алар акырындык менен өзгөртүүгө мүмкүндүк берет жана: тунуктугун.

Кантип чиелениши мүлктү колдонуу

тунуктугу мүлк 0,0 пайыздан 1,0 ачыктык суммасынан баасын алат.

0.0 Ошол элементтин төмөнкү 100% ачык-нерсе толугу менен көрсөтүүгө болот. 1.0 элементтин аркылуу көрсөтөт төмөнкү 100% айкын-эч нерсе жок.

Ошентип, 50% ачык үчүн элементти коюп, сиз жазган:

тунуктугу: 0.5;

иш-айкын эместиги, кээ бир мисалдарды карагыла

Улгайган браузерлерде текшер сөзсүз

Да IE 6 да, 7 колдоо CSS3 тунуктугу мүлк. Бирок сен Бөлүнүп чыккан эмеспиз. Анын ордуна, IE бир Microsoft гана мүлк Alpha чыпкасы колдойт. IE-жылы Alpha чыпкалары 0 баалуулуктарды кабыл алуу (толугу менен ачык-айкын) 100 (толук ачык эмес) болгон. Демек, башкача айтканда, сиздин ачыктык, сиз 100 менен тунуктугун көбөйтөм жана стилдеги үчүн Alpha чыпкасы кошуу керек алуу үчүн:

элеги: Alpha (тунуктугу = 50);

иш Alpha чыпкасы кара (IE гана)

Жана колдонуу Browser Этиштин

Сиз -moz- жана Mozilla жана WebKit браузерлердин эски котормолорунда, аны да колдоо үчүн Сизде Этиштин пайдалануу керек:

-webkit-тунуктугу: 0.5;
-moz-тунуктугу: 0.5;
тунуктугу: 0.5;

биринчи браузер Этиштин коюп ар дайым, жана CSS3 мүлк өткөн.

улуу Mozilla жана WebKit браузерлерде серепчи Этиштин текшер.

Сиз Images Transparent алам Тоо

өзү Сүрөттөгү тунуктугун коюп, ал экинчи планга жылгандай болот. Бул чындап эле пайдалуу өбөлгөлөрү сүрөттөрү .

Эгер кеме казыктай тег менен толукталсын, анда сиз түзө алабыз үстүнө кесепеттерин эле айкелдин тунуктугун өзгөртүү менен.

а: үстүнө IMG {
элеги: Alpha (тунуктугу = 50)
элеги: progid: DXImageTransform.Microsoft.Alpha (тунуктугу = 50)
-moz-тунуктугу: 0.5;
-webkit-тунуктугу: 0.5;
тунуктугу: 0.5;
}

Бул HTML таасир этет:

иш жогоруда образын жана HTML текшер.

Текст боюнча Сүрөттөр кой

бүдөмүктөнүү менен, сиз бир сүрөттөлүш ичинде текстти коюп, сүрөттөлүш болушу мүмкүн деген текст кайда алып акырындык менен көрүнөт.

Бул ыкма толугу менен сүрөттү түздөлүп калат, сен жөн гана, сүрөттү акырындык менен жок болот, анткени бир аз татаал болуп саналат. Анан акырындык менен жок болот текст кутучасын текст, ошондой эле ал жерде соолуп, анткени.

1. Алгач бир контейнер DIV түзүү жана сүрөт ичинде жайгаштырууга:

   
   

2. бош DIV ээсинин менен сүрөттү Постту ачык болот болот.

   
   
   

3. Сиз HTML менен толукталсын акыркы нерсе, ал силердин тексти менен DIV болуп саналат:

   
   
   
   Бул менин итим Shasta болуп саналат. Ал сүйкүмдүү эмес!

4. Сиз бейнеси жогорудагы сөздөрдү коюп, CSS Positioning менен табылган. Мен сол жагында мен текстти коюп, бирок эки сол өзгөртүп укугуна койду болот: 0; укугуна касиеттери: 0; .

   #image {
   орду: салыштырмалуу;
   туурасы: 170px;
   бийиктиги: 128px;
   маржа: 0;
   }
   курстар {
   орду: абсолюттук;
   Top: 0;
   сол: 0;
   туурасы: 60px;
   бийиктиги: 118px;
   маалымат: #fff;
   толтургучтар: 5px;
   }
   курстар {
   элеги: Alpha (тунуктугу = 70);
   элеги: progid: DXImageTransform.Microsoft.Alpha (тунуктугу = 70);
   -moz-тунуктугу: 0,70;
   тунуктугу: 0,7;
   }
   #words {
   орду: абсолюттук;
   Top: 0;
   сол: 0;
   туурасы: 60px;
   бийиктиги: 118px;
   маалымат: ачык;
   толтургучтар: 5px;
   }

аны карайт