Полупрозрачен css фон. Създаване на прозрачен фон в HTML и CSS (непрозрачност и RGBA ефекти)

Днес искам да говоря за прозрачния фон на блок от текст, как да го направя и какво предлага CSS3 за това. Преди да преминем към rgba и hsla, нека разгледаме примери за използване на полупрозрачен фон за блок с текст, или по-скоро как се постига това и какви проблеми възникват. За демонстрация ще използваме тази картина, обработена от някаква java програма, и връзката към която, за съжаление, беше загубена отдавна.

Разглеждаме снимката по-долу. Има графичен фон, върху който искате да наслагвате полупрозрачен блок с текст. В идеалния случай трябва да има това, което е на фигурата под числото 2, но понякога може да се появи това, което е под числото 3. Има още един дефект, но ще го спомена устно малко по-долу, т.к. нямаше начин да се направи екранна снимка.

Прозрачен фон без rgba и hsla

1. Прозрачен PNG ... Най-добрият вариант, т.к това е най-много браузър и най-простият. За да бъде блокът прозрачен, е необходим един пиксел полупрозрачен PNG, който се задава като фон на блока. И това е всичко.
   
   недостатъци: Изисква се само един.
2. Прозрачност чрез непрозрачност ... Прозрачността на блока се настройва в браузъра, както следва:

   непрозрачност: 0,5;
   филтър: алфа (непрозрачност = 50);
   -moz-opacity: 0,5;

   където 0,5 и 50 са 50% прозрачност. Но има проблем. Ако зададем желания блок на такава полупрозрачност, тогава ще видим тази трета опция на изображението по-горе - съдържанието на блока също ще стане полупрозрачно. Има обаче изход - свободно позициониране, с помощта на което се поставя друг блок под текстовия блок, на който се задава полупрозрачността.

   Нека да разгледаме един пример. Нека блокът с оранжевата картинка да бъде body tag, контейнерът, съдържащ както текста, така и прозрачния фон - #block_bg, вътре в който блокът с полупрозрачния фон е #block_transparent, а блокът с текста е #block_text.

   
   

   
   

   Текст текстов текст, много, много текст

   
   

   тяло (фон: url (image.jpg);)
   #block_bg (
   позиция: относителна;
   преливане: скрито;
   ширина: 400px;
   допълване: 10px;
   }
   #block_text (позиция: относителна; z-индекс: 100;)
   #block_transparent (
   непрозрачност: 0,5;
   филтър: алфа (непрозрачност = 50);
   -moz-opacity: 0,5;
   фон: #fff;
   позиция: абсолютна;
   отгоре: 0;
   вляво: 0;
   z-индекс: 90;
   височина: 5000px;
   ширина: 400px;
   }

   Обръщам вниманието ви на факта, че е необходимо да зададете ширината на прозрачния блок (ред 19), в противен случай той ще се свие в 1 пиксел и ширината на общия блок (ред 5), в противен случай текстът ще надхвърли прозрачният блок (въпреки че ширината може да бъде зададена за текста, но няма фундаментална разлика ще). За да отстъпите текста и ръбовете на прозрачното поле, използвайте отстъп на шестия ред. За да направите прозрачността регулируема по височина, дайте й по-висока височина (ред 18) и припокриване за общия блок (ред 4).
   И така, натъпкахме всичко в един блок, който може да бъде пъхнат във всяка част на страницата, където има интересен фон. Да, може да искате да зададете фон за обикновения block_bg, но е по-добре не – направете живота си по-труден (в зависимост, разбира се, от задачата). С други думи, по-добре е цялата тази структура да се натъпче в отделен блок, към който можете да зададете запълване и да не страдате.
   недостатъци: Твърде тромаво.

rgb и hsl, rgba и hsla - CSS3 свойства

По-точно, това не са точно свойства – това е нова възможност за задаване на цветове за свойства като фон, цвят, граница и т.н.

Името на свойствата идва от цветови системи RGB (червено, зелено, синьо) и HSL (Hue, Satutation, Lightness). Първата система описва цветовото пространство чрез смесване на основните цветове - червено, зелено и синьо. Във втората система цветните компоненти показват информация за цвета в по-позната за хората форма: Какъв е този цвят? Колко интензивен е? Колко светло или тъмно е?

rgb и rgba

Нека започнем с rgb и rgba. Стойностите r, g, b могат да бъдат зададени от 0 до 255 или от 0% до 100%. Стойността a (алфа, прозрачност) се измерва от 0 до 1 (дробните стойности се определят чрез точка - 0,4, 0,7 и т.н.). Ако r, g и b са зададени на стойности, които надхвърлят валидния им диапазон (например 300 или 110% или -5), те ще се свият до най-близката валидна стойност.

Нека разгледаме фоновото свойство като пример (въпреки че желаещите могат да вземат цвят или граница).

фон: rgb (0, 0, 255); / * чисто синьо * /
фон: rgb (100%, 50%, 0%); / * чисто синьо * /
фон: rgb (10, 145, 500); / * ще бъде разпознат като 10, 145, 255 * /
фон: rgba (10, 145, 255, 1); / * същото като предишното * /
фон: rgba (100, 50, 255, 0.1); / * много прозрачен нюанс на люляк * /

Да, забравих да кажа, че не можете да поставите интервал между свойството и отварящата скоба и не можете да зададете някои стойности в същия ред в обикновени числа, а други в проценти. Ако направите това, нищо няма да работи.

hsl и hsla

И няколко думи за hsl и hsla. Стойността на a се задава по същия начин, както при rgb и rgba, но с първите три параметъра ситуацията е малко по-различна. h варира от 0 до 360, а s и l варира от 0% до 100%.

И най-важното. Ако в rgb е много трудно да се определи цвета от главата (почти винаги е необходимо програма на трета странас "капкомер"), тогава тук е достатъчно да имате една снимка пред очите си, така че всичко да си дойде на мястото. Снимката показва нюансите на параметъра h.

За да оцените необходимия цвят, изберете нюанс, след това оценете s, наситеността на цвета (където 0% е ненаситен цвят (сянка на сивото), а 100% е най-много наситеност) и неговата лекота (0% - с него цветът винаги ще бъде черен, а със 100% - бял). Въз основа на горното, картината показва тоновете при 100% наситеност и 50% лекота.

Сега цялото цветово пространство е в главата ви с един поглед. Разбира се, ръчният избор не замества капкомер и не всеки трябва да има "цветно пространство" в главите си, но понякога, за да разберем бързо какво е необходимо и да тества, е подходящо.

И само няколко примера

фон: hsl (180, 100%, 50%); / * тъмносин * /
фон: hsla (140, 50%, 30%, 0,5); / * полупрозрачен, едва забележим, че нюансът на зеленото * /

недостатъци: всичките 4 свойства не се поддържат от Donkey и по-стари браузъри.

Завършване

Като цяло CSS3 предоставя някои други много полезни неща, но както винаги, IE е основната спирачка на прогреса. За клиентски сайтове засега бих се въздържал да го използвам (все пак ще търпят мозъка напразно) и бих взел опцията с PNG. И на вашия сайт - защо не. Особено ако се посещава от напреднали хора, които не седят на магарета или някакви фрагменти от древността.

С навлизането на CSS3 работата на дизайнерите на оформление стана много по-лесна и по-логична: сега можете наистина гъвкаво да персонализирате всеки обект, като използвате JavaScript все по-малко. Да речем, че трябва да регулирате прозрачността на фона - CSS веднага предлага няколко опции.

Фонът се задава от набор от атрибути, background-repeat, background-attachment, background-origin, background-clip, background-color), като всеки от тях може да бъде написан отделно или комбиниран под атрибута background. Нека разгледаме по-отблизо всеки един от тях.

Атрибут цвят на фона

Дори IE8 поддържа този метод. Няколко изображения се използват като фонове за течно оформление. Най-важното е, не забравяйте да зададете цвета на фона в CSS, когато използвате което и да е изображение, тъй като изображението може просто да не се зареди за потребителите.

Атрибут фонова позиция

Ако използвате изображение, за да зададете фона на блок, CSS ще ви позволи да позиционирате изображението навсякъде на екрана. По подразбиране изображението се намира в горния ляв ъгъл. Атрибутът приема или словесни индикации (отгоре, долу, ляво, дясно) или цифрови индикации (проценти, пиксели и други единици). В този случай трябва да посочите две стойности: хоризонтално и вертикално:

body (background-position: right center;) - в този пример фонът ще бъде разположен от дясната страна на страницата, а горното и долното разстояние до изображението са еднакви.

Атрибут за размер на фона

Понякога трябва да използвате CSS, за да разтегнете или намалите размера на фона. За това се използва атрибутът background-size, като размерът на фона може да бъде зададен както в пиксели или проценти, така и във всякакви други мерни единици.

Има някои проблеми с този атрибут: префиксите трябва да се използват за правилното показване на фона в по-ранните версии на браузърите. Разбира се, текущи версиинапълно поддържа този атрибут и необходимостта от специфични свойства е изчезнала.

Атрибут за прикачване на фона

Този атрибут определя поведението на превъртане на фоновото изображение. Така че може да приеме 3 стойности (с изключение на наследяването, което е общо за всички атрибути, представени в тази статия):

• фиксирани- прави картината на фона неподвижна;
• превъртете- фонът се превърта заедно с останалите елементи;
• местен- изображението на фона се превърта, ако съдържанието има превъртане. Заснемат се фонове, които надхвърлят съдържанието.

Пример за употреба:

тяло (закрепен фон-прикачен файл).

Firefox в момента не поддържа последното свойство (локално).

Атрибут фонов произход

Този атрибут е отговорен за позиционирането на елемента. Браузъри ранни версииизискват използването на префикси. Самият имот има три параметъра:

• padding-boxпозиционира фона спрямо ръба, като същевременно взема предвид дебелината на рамката;
• гранична кутиясе различава от предишното свойство по това, че граничната линия може напълно или частично да припокрива фона;
• кутия за съдържаниепозиционира изображението, като го обвързва със съдържанието.

Ако са дадени няколко стойности, браузърите могат да реагират различно: Firefox и Opera приемат само първата опция.

Атрибут за фоново повторение

Обикновено, ако фонът е дефиниран от изображение, то трябва да се повтаря хоризонтално или вертикално. За това служи атрибутът background-repeat. И така, фонът на блок, чийто CSS съдържа такова свойство, може да има един от няколко параметъра:

• без повторение- изображението се появява на страницата в единична версия;
• повторете- фонът се повтаря по осите x и y;
• повтори-x- само хоризонтално;
• повтори-у- само вертикално;
• пространство- фонът се повтаря, но ако пространството не може да бъде запълнено, тогава между картините се появяват празнини;
• кръгъл- изображението се мащабира, ако е невъзможно да се запълни цялата област с цели снимки.

Пример за използване на атрибута:

тяло (повторение на фона: повторение без повторение)- по същия начин background-repeat: repeat-y.

В CSS3 е възможно да зададете стойности за множество изображения чрез изброяване на параметри, разделени със запетаи.

Атрибут фонов клип

Този атрибут определя поведението на фона под границите (например в случай на пунктирани граници):

• padding-box- фонът се показва строго вътре в блока;
• гранична кутия- изображението отива под рамките;
• кутия за съдържание- картината на заден план се появява само в съдържанието.

Пример за употреба:

тяло (background-clip: content-box;).

Chrom и Safari изискват префикса -webkit-.

Непрозрачност и атрибути на филтъра

Атрибутът opacity ви позволява да зададете прозрачността на фона - свойството CSS ще работи във всички браузъри. Стойността се задава в диапазона от 0.0 до 1.0 включително. С това можете да зададете прозрачността CSS фонбез целочислена стойност: вместо 0,3 е достатъчно да напишете 3:

.block (фоново изображение: url (img.png); непрозрачност: .3;).

За да зададете прозрачността на фона, чийто CSS ще работи дори за IE под деветата версия, използвайте атрибута филтър:

.block (фоново изображение: url (img.png); филтър: алфа (непрозрачност = 30);).

В този случай стойността на непрозрачността се задава в диапазона от 0 до 100. Имайте предвид, че атрибутът за непрозрачност се различава от настройката за непрозрачност, използвайки RGBA при наследяване: когато използвате непрозрачност, не само фонът става прозрачен, но и всички елементи вътре в блока .

Винаги следете статистиката за използването на браузъри в ОНД и всички други страни. Най-големият проблем на всички дизайнери на оформление са старите версии на IE, те не позволяват пълно използване на CSS3. Когато кодирате, не забравяйте да използвате специални услуги, които проверяват дали браузърът ви поддържа някое CSS свойство. Ако не можете да инсталирате стари версии на браузъри, намерете услуга, която ще провери сайта различни браузърина линия.

Задача

Направете блоков елемент с цялото му съдържание полупрозрачен.

Решение

За да промените непрозрачността на елемент, използвайте свойството на непрозрачност със стойност от 0 до 1, където 0 съответства на пълната прозрачност, а 1, напротив, на непрозрачността на обекта. V интернет браузър Explorer не работи с това свойство, така че трябва да използвате филтър специално за него, свойство, което не е част от спецификацията на CSS. Пример 1 показва как да зададете прозрачност на слоя за всички браузъри.

Пример 1. Полупрозрачен слой

HTML5 CSS 2.1 IE Cr Op Sa Fx

Резултат този примерпоказано на фиг. 1

Ориз. 1. Полупрозрачен слой в Браузър Safari

Свойството на филтъра добавя прозрачност само към онези елементи, при които е зададен поне един от размерите (ширина или височина) или елементът е зададен на абсолютно позициониране (позиция: абсолютна).

Също така имайте предвид, че прозрачността засяга цялото съдържание на слоя, включително децата, и няма да можете да увеличите нивото на непрозрачност за тях, като променяте непрозрачността. В пример 1, където непрозрачността на слоя е зададена на 0,7, текстът вътре в слоя получава същата стойност. Допустимо е да го зададете по-малко, но текстът не може да надвишава стойността на прозрачност от 0,7.

Ефектът на полупрозрачността на елемента е ясно видим във фоновото изображение и е станал широко разпространен в различни операционна системазащото изглежда стилно и красиво. В уеб дизайна полупрозрачността също се прилага и се постига чрез свойството непрозрачност или цветния формат RGBA, който е зададен за фон.

Свойство непрозрачност

Основната характеристика на това свойство е, че стойността на прозрачността засяга всички деца вътре, а не само фона. Това означава, че както фонът, така и текстът ще станат полупрозрачни и няма да можете да увеличите нивото на прозрачност чрез добавяне. Таблица 1 показва външния вид на текст и фон с различни стойности на непрозрачност.

Пример 1 показва как да създадете полупрозрачен блок с помощта на непрозрачност.

Пример 1. Фон на уеб страница

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Обикновено по проект само фонът на елемент трябва да е полупрозрачен, а текстът трябва да е непрозрачен, за да се поддържа четливост. Свойството opacity е неподходящо тук, защото текстът вътре в елемента също ще бъде частично прозрачен. Най-добре е да използвате RGBA формата, част от който е алфа каналът, или с други думи стойността на прозрачността. Стойността се записва в rgba, след което стойностите на червения, синия и зеления цвят са изброени в скоби, разделени със запетаи. Последната е прозрачност, която се задава от 0 до 1 (фиг. 1), като 0 е пълна прозрачност, а 1 е непрозрачността на цвета.

Ориз. 1. Синтаксис за използване на rgba

Пример 2 показва формата RGBA, използван за създаване на полупрозрачен фон.

Пример 2. Полупрозрачен фон

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Резултатът от този пример е показан на фиг. 2. Стойността на непрозрачността на фона е настроена на 90%.

Ориз. 2. Полупрозрачен фон и непрозрачен текст

Има три начина да промените прозрачността на елемент в CSS:
използвайки свойството непрозрачност,
използвайки функцията rgba (),
с помощта на функцията hsla ().

1. Свойството непрозрачност

Свойството opacity ви позволява да направите всеки елемент от уеб страница частично или напълно прозрачен. Това свойство променя прозрачността на елементи, които имат фоново изображение (картина) или фон с цвят или градиент. Ако елементът, за който се прилага свойството непрозрачност, съдържа други елементи в него, тогава те също ще променят своята непрозрачност.
Свойството непрозрачност варира от 0 (напълно прозрачен) до 1 (непрозрачен), например:

H1 (цвят: # CD6829;) div (фон: # CDD6DB; непрозрачност: .3;)
Ориз. 1. Прозрачност на елементи с помощта на непрозрачност

2. Функцията rgba ().

Цветният модел RGBA създава цветова гама чрез смесване в необходимите пропорции червено (червено), зелено (зелено)и синцветове и алфа канал (алфа)отговаря за степента на прозрачност на цвета. За разлика от свойството opacity, за блок, съдържащ други елементи, функцията rgba () ще промени само непрозрачността на блока.

3. Функцията hsla ().

Hsla () функция, чиито параметри означават тон (Hue), насищане, яркост (Lightness)и алфа канал (алфа), също така ви позволява да зададете полупрозрачен цвят.

Цветовите нюанси се определят като процент, като се използва съответната стойност от цветното колело. Самият кръг е разделен на сектори, на границите на които има основни цветове:

0/360 ° - червено
60 ° - жълто
120 ° - зелено
180 ° - синьо
240 ° - синьо
270 ° - лилаво
300 ° е магента.