Днес искам да говоря за прозрачен фон на текстовия блок, как да го направя, и че предлага CSS3. Преди да отидете RGBA и hsla, вижте примери за използването на прозрачна основа за текстовия блок, а по-скоро как се постига и с какви проблеми възникват. За демонстрация ние използваме тук на тази снимка, лекувани някои програма на Java, както и връзка към които, за съжаление, е загубен за дълго време.
Гледаме на снимката по-долу. Има графичен фон, на който искате да се сложи една прозрачна блок от текст. В идеалния случай, трябва да има нещо в картината под номер 2, но това може да се случи, че под номер 3. Има и друг дефект, но се споменава за това устно по-долу, тъй като otskrinshotit не е било възможно.
Полу-прозрачен фон и без RGBA hsla
- Полу-прозрачен PNG. Оптималното изпълнение, тъй Днес той е най-крос-браузър и най-лесният. За блок е бил прозрачен, полупрозрачен един пиксел изисква PNG, който е зададен като фон блок. И все пак.
Недостатъци. Само един - нужда от хак за IE6 и под, премахва проблема с прозрачност.
непрозрачност: 0.5;
филтър: алфа (непрозрачност = 50);
-Moz-непрозрачност: 0.5;
където 0,5 и 50 - прозрачност 50%. Но има един проблем. Ако дефинираме блока на полупрозрачно, ще видим третата версия на изображението над - блок съдържанието също ще стане прозрачна. Въпреки това, има решение - свободно позициониране, като текстови блок е поставен още един блок, който е определен и прозрачност.
Помислете за пример. Да предположим, че блок с оранжев картина - това е тялото на етикет, контейнерът, който ще текстовите и прозрачна подложка - #block_bg, вътре в която блок с полупрозрачен фон #block_transparent и блок с текст - #block_text.
тяло
#block_bg позиция: относителна;
препълване: скрит;
ширина: 400 пиксела;
подложка: 10px;
>
#block_text
#block_transparent <
непрозрачност: 0.5;
филтър: алфа (непрозрачност = 50);
-Moz-непрозрачност: 0.5;
фон: #fff;
позиции: абсолютен;
Горе: 0;
лява: 0;
Z-индекс: 90;
височина: 5000px;
ширина: 400 пиксела;
>
Аз привлека вниманието ви, че е необходимо да се определи ширината на прозрачен блок (ред 19), в противен случай тя ще се търкаля в един пиксел, а ширината на общ блок (линия 5), в противен случай текстът ще отиде отвъд прозрачен блок (въпреки че ширината може да бъде, и текстът да попитам, но основната разлика не е ще). За да се отдалечава от текста и ясно край на блока, като се използва подложка в шестия ред. За прозрачност има регулируема по височина, зададена на това малко по височина (линия 18) и припокриването на общ блок (линия 4).
Така че ние избута всичко-в-едно устройство, което може да настоява във всяка част на страницата има един интересен субстрат. Да, може да искате да поставите на заден план е общ блок block_bg, но по-добре да не - да направи живота труден за себе си (в зависимост разбира се от проблема). С други думи, по-добре цялата структура да прокара в отделна единица, в която се поставя подложка, а не да страдат.
Недостатъци. Твърде тромави.
RGB и HSL, RGBA и hsla - CSS3 имоти
По-точно това не е точно свойства - това е нова възможност да задава цветове за свойства, като на заден план, цвета, границата, и т.н.
Името на свойствата отиде от цветни системи RGB (червено, зелено, синьо) и от HSL (Hue, Satutation, лекота). Първата система описва цветово пространство чрез смесване на основните цветове - червено, зелено и синьо. През втората система, цветовите компоненти на информацията на екрана на цветовете в по-запознати форма на човек: Какво е този цвят? Доколкото той богат? Доколкото той е светъл или тъмен?
Нека започнем с RGB и RGBA. R Стойностите, д, б може да се настрои 0-255 или от 0% до 100%. Стойността на а (алфа, прозрачност) се измерва от 0 до 1 (частични стойности, определени чрез точката - 0.4, 0.7, и т.н.). Ако R, G и б са определени стойности над тяхната допустим диапазон (например 300 или 110% или -5), се намалява до най-близкия приемлива стойност.
Вземем примера на всички свойства на фона (въпреки че всеки може да вземе цвета или граница).
фон: RGB (0, 0, 255); / * Pure син цвят * /
фон: RGB (100%, 50%, 0%); / * Pure син цвят * /
фон: RGB (10, 145, 500); / * Ще бъдат признати като 10, 145, 255 * /
фон: RGBA (10, 145, 255, 1); / * Същото като предишното * /
фон: RGBA (100, 50, 255, 0.1); / * Много прозрачен нюанс на лилаво * /
А, забравих да кажа, че не може да бъде между имущество и отварящата скоба и оставете разстояние не може да бъде определен в една линия една стойност в нормални номера, а други като процент. Ако го направите - това няма да стане.
И няколко думи за HSL и hsla. Е дадена стойност, както и с RGB и RGBA, а първите три параметри на ситуацията е малко по-различно. з е избран от 0 до 360, и и и л - от 0% до 100%.
И най-важното нещо. Ако RGB определят цвета на главата е много трудно (почти винаги изисква програма на трета страна с "пипета"), не е достатъчно, за да има един образ пред очите ми, че всичко си дойде на мястото. Картината показва нюанси на параметъра ч.
За оценка на желания цвят, изберете цвят, след това претендира S, наситеността на цветовете (където 0% - това е ненаситен цвят (нюанс на сивото) и 100% - насищане) и лекота (0% - ако цветът винаги ще бъде черно, и когато 100% - бяло). Въз основа на изложеното по-горе, на снимката е показано в светли тонове при 100% насищане и лекота на 50%.
Сега всичко, цветовото пространство в главата в пълен изглед. Разбира ръчен избор не замества капкомера, и не всички трябва да имат "цветовото пространство" в главата ми, но понякога, бързо да се оцени и, че е необходимо да се тества - тя се вписва.
И само няколко примера
фон: HSL (180, 100%, 50%); / * Наситен син цвят * /
фон: hsla (140, 50%, 30%, 0.5); / * Translucent, едва доловимо, че зелен нюанс * /
Недостатъци. Всички 4 имота не са подкрепени от по-стари браузъри и задника.
Като цяло, най-близките CSS3 дава много полезни неща, но както винаги, IE - основната пречка за напредъка. сайтове на клиенти аз ще трябва да се въздържат от употребата на (повече мозък за нищо няма да се направи) и ще използват възможността с PNG. И на сайта - а защо не. Особено, ако тя се посещава от модерни хора не седят на задниците им или каквито и фрагменти от античността.
Свързани статии