прозрачен css. CSS прозрачност на фона. Прозрачен фон или текст с CSS. Използване на PNG изображение

Здравейте всички. Както може би знаете, фонът е свойство на CSS, което ви позволява да зададете цвета на фона или да качите изображение, което да действа като фон. CSS3 също въведе възможността за създаване на линейни и радиални градиенти, но това е тема за отделна статия. В същия исках да ви кажа как да зададете прозрачност за свойството на фона в css.

Задайте прозрачност за css фон

И така, всичко това се прави много просто благодарение на такъв формат за цветен запис като rgba. Ако работите с графични редактори, вероятно знаете, че цветовият режим rgb се декодира, както следва: съотношението на червено (червено), съотношението на зелено (зелено) и синьо (синьо). И така, rgba е почти същото, само че се добавя още един параметър - прозрачност. Написано е така:

Цвят на фона: rgba(173, 57, 22, 0.5)

Първо, ние изрично посочваме, че задаваме цвета в режим rgba. След това посочваме стойностите на наситеност на трите основни цвята от 0 до 255, където 255 е най-високата наситеност. Четвъртият параметър е нашата прозрачност. Тук стойността се записва от 0 до едно. 1 е напълно непрозрачен елемент, а 0 е напълно прозрачен елемент. Съответно, ако го зададете на 0, тогава цветът на фона изобщо няма да се вижда.

Сега знаете как да зададете прозрачност за свойството на фона в css. За да направите това, трябва да използвате цветовия режим rgba. Има и свойство за непрозрачност, но то се отнася за целия елемент като цяло. Тоест при прилагане на непрозрачност може да се приложи и прозрачност към текста, което ще го направи нечетлив.

Пример за прозрачен фон

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

А сега нека зададем същия черен цвят на блока, но го уточним с помощта на цветовия формат rgba, като последната стойност е 0,7, например. Ще се получи така:
Сега фонът на блока е полупрозрачен и фоновото изображение се вижда през него. Тази снимка и фон са само за илюстрация. Както разбирате, в css прозрачността на фона може да бъде полезна, когато имате нужда фонът на вложен елемент да се показва, без да закрива други фонове, разположени в други слоеве.

Самият цвят не е труден за настройка с помощта на rgba. Както вече споменахме, първите три букви означават трите основни цвята: червено, зелено и синьо, или по-скоро техния дял (от 0 до 255). Чрез задаване на различни стойности можете да получите милиони различни цветове, а полупрозрачността ще ви позволи да измислите много красиви ефекти за сайта, ако е необходимо.

Влад Мержевич

Частичната прозрачност, когато се използва правилно, изглежда много впечатляващо в дизайна на уебсайта. Основното е, че под полупрозрачните блокове не трябва да има едноцветен модел, а изображение, в този случай прозрачността става забележима. Този ефект се постига по много начини и ако си спомняте всичко, включително старомодни методи, тогава това е използването на PNG изображение като фон, създаване на карирано изображение и свойството opacity. Но веднага щом стане необходимо да се направи полупрозрачен фон в блока, тези методи имат неприятен недостатък. Ще направя кратък преглед, за да стане ясно за какво става дума, както и за онези читатели, които не са запознати с нетрадиционните опции за създаване на ефект на полупрозрачност.

PNG като фон

AT графичен редакторпредварително се изготвя едноцветен полупрозрачен чертеж, който се записва във формат PNG-24 (фиг. 1). Характеристика на този формат е поддръжката на 256 нива на прозрачност, или просто казано, той може да показва полупрозрачни картини.

Ориз. 1. Изображение за създаване на фон

След това добавяме изображение като фон чрез свойството background, както е показано в пример 1.

Пример 1: Използване на полупрозрачен модел

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Ориз. 2. Поставяне на тапет

Остарял браузър Internet Explorer 6 не работи с полупрозрачност в PNG-24, ако по някаква причина трябва да поддържате този браузър, ще трябва да използвате скриптове за него.

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

карирано изображение

Този метод принадлежи към древните начини за внедряване на полупрозрачност, когато браузърите „не можеха да направят нищо“ и трябваше да търсите решения без шаблони. Номерът е да създадете изображение, което редува прозрачни и непрозрачни пиксели (Фигура 3). Такава правилна структура създава ефекта на полупрозрачност, като по същество го имитира.

Ориз. 3. Уголемено каре

Ето как изглежда в крайна сметка (фиг. 4).

Ориз. 4. Имитация на полупрозрачност

Недостатъците на този метод са сравними с предишния, също могат да се появят шарки от моаре и се получава влошаване на текста.

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

Свойството непрозрачност на CSS 3 задава стойността на прозрачност и варира от 0 до 1, където нула е пълната прозрачност на елемента, а едно, напротив, е непрозрачност. Свойството opacity има функция - прозрачността се разпределя към всички дъщерни елементи и те не могат да надвишават стойността на прозрачност на своя родител. Оказва се, че на полупрозрачен фон не може да има непрозрачен текст (пример 2).

Пример 2: Използване на непрозрачност

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

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

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

В Internet Explorer до и включително версия 8.0 непрозрачността не работи, така че за него се използва специфичното за браузъра свойство на филтъра. Естествено, това води до невалиден CSS код.

RGBA

Съвременният подход е много по-прост и визуален от горните методи и се състои в използването на RGBA формат за цвят и фон. Първите три букви са познати на мнозина и означават червено, зелено, синьо (червено, зелено, синьо), последната символизира алфа канала и задава прозрачността на елемента. Форматът на записа е този.

цвят на фона: rgba(r, g, b, a);

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

Не всички браузъри поддържат този формат: Internet Explorer от версия 9, Opera от версия 10, Firefox от 3, Safari от 3.2. Но като цяло, модерни браузърипоказвайте правилно прозрачността. За по-старите версии на IE можете отделно да посочите цвета в обичайния му формат, като, разбира се, няма да има прозрачност. Или използвайте отново свойството филтър, но тогава трябва да се примирите с факта, че прозрачността също ще засегне текста (пример 3). За да наложа валиден CSS код, използвах условни коментари.

Пример 3: Използване на RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Резултатът от примера може да се види на фиг. 6.

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

Сравнете снимката с предишната, буквите са станали по-ярки и ясни.

AT интернет браузър Explorer 7 откри грешка при комбиниране на цвят на фона с различни стойности. Например, ако зададете цвета на фона на червено, както е показано по-долу, тогава фонът в IE7 изобщо няма да се показва.

Div ( цвят на фона: червен; /* Неприложимо в IE7 */ цвят на фона: rgba(255, 0, 0, 0.5); )

Това се решава чрез замяна на свойството background-color с background.

Div ( фон: червен; /* И това работи */ фон: rgba(255, 0, 0, 0.5); ) Има обаче едно предупреждение. CSS валидаторът "псува" на фона, ако го зададете RGBA формат. Но в същото време правилно се прилага към фоновия цвят. Като цяло, както винаги, трябва да избирате между браузъри и валидност.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По принцип, ако фонът е зададен на изображение, то трябва да се повтори хоризонтално или вертикално. За това служи атрибутът за фоново повторение. Например, фонът на блок, чийто CSS съдържа такова свойство, може да има една от няколко опции:

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

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

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

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

атрибут background-clip

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

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

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

тяло (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); филтър: alpha(opacity=30);).

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

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

Прозрачността на фона на сайта се създава чрез CSS свойства. Има два начина за постигане на прозрачност: чрез свойството opacity и background:rgba(). Нека да разгледаме всеки от тях и след това да направим сравнение.

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

CSS има свойство opacity, с което можете да зададете прозрачността на изображения, текстове, включително фонове.

Настройката за прозрачност се задава просто чрез посочване реално числоот 0.0 до 1.0. Колкото по-ниско е числото, толкова по-малко видим ще бъде обектът.

непрозрачност: 0,5 // Полупрозрачностнепрозрачност: 0.2 // Обектът е видим само 20%.непрозрачност: 0.8 // Обектът се вижда само на 80%.

Нека да разгледаме пример със свойството opacity.

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF - полностью непрозрачный, 00 - прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…