Ефектът на полупрозрачност на елемента е ясно видим във фоновото изображение и е широко разпространен в различни операционна системазащото изглежда стилно и красиво. В уеб дизайна полупрозрачността също се използва и се постига чрез свойства на непрозрачностили цветовия формат 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. Полупрозрачен фон и непрозрачен текст

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

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

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

Помислете за полупрозрачността на текста и фона - как да го използвате правилно в дизайна на уебсайта:

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

HTML 5 CSS 3 IE 9

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

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

Полупрозрачен фон HTML 5 CSS 3 IE 9

Стойността на непрозрачност за фона е зададена на 90% - полупрозрачен фон и непрозрачен текст.

Добър ден, маниаци на уеб разработка, както и начинаещи. За тези, които не следят тенденциите в ИТ сферата, или по-скоро уеб модата, искам тържествено да съобщя, че тази публикация е на тема: „Как да направим прозрачен css блокинструменти“ точно навреме за вас. Всъщност през настоящата 2016 г. въвеждането на различни прозрачни обекти в онлайн услугите се счита за стилен ход.

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

Метод 1. Допотопен

Кога бяха там слаби компютрии "способността" не е развита, разработчиците са измислили свой собствен начин за създаване на прозрачен фон: използването на прозрачни пиксели на свой ред с цветни. Създаденият по този начин блок изглеждаше като шахматна дъска при мащабиране, но в нормален размер приличаше на някаква прозрачност.

Това, според мен, "патерица", разбира се, помага в по-стари версии на браузъри, в които съвременните решения не работят. Но си струва да се отбележи, че качеството на текстовия дисплей , вписан в такива , пада рязко.

Метод 2. Не е объркан

В редки случаи разработчиците решават проблема с въвеждането на полупрозрачно изображение, като вмъкнат ... вече готово полупрозрачно изображение! За целта се използват изображения, записани във формат PNG-24. Този графичен формат ви позволява да зададете 256 нива на полупрозрачност.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Този метод обаче не е удобен поради няколко причини:

1. Internet Explorer 6 не работи с тази технология, трябва да напишете скриптов код за него;
2. Не можете да промените цветовете на фона в css;
3. Ако функцията за показване на изображения е деактивирана в браузъра, тя ще изчезне.

Метод 3. Популяризиран

Най-често срещаният и добре известен начин да направите блок прозрачен е свойството непрозрачност.

Стойността на параметъра варира в диапазона , където при 0 обектът е невидим, а при 1 се показва напълно. Тук обаче има някои неприятни моменти.

Първо, всички дъщерни елементи наследяват прозрачност. А това означава, че вписаният текст също ще „свети“ заедно с фона.

Второ, Internet Explorer отново си вирна носа и до версия 8 не работи с непрозрачност.

За да разрешите този проблем, използвайте филтър:алфа (Непрозрачност=стойност).

Помислете за пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Метод 4. Модерен

Днес професионалистите използват инструмента rgba (r, g, b, a).

Преди това казах, че RGB е един от популярните цветови модели, където R отговаря за всички нюанси на червеното, G - нюансите на зеленото и B - нюансите на синьото.

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

Основно предимство последния начин- алфа каналът не засяга обекти вътре в стилизирания блок.

rgba (r, g, b, a) се поддържа от:

• 10 версии на Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 версии на Firefox.

искам да отбележа интересен факт! Любимият Internet Explorer 7 извежда грешка при комбиниране на свойство Цвят на фонас името на цветовете (фонов цвят: златен). Следователно трябва да използвате само:

цвят на фона: rgba(255, 215, 0, 0.15)

А сега един пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

В нашия магазин ще намерите всякакви цветя.

забележи, че текстово съдържаниеблокът е напълно видим (100% черен), докато фонът е настроен на алфа канал от 0,88, т.е. 88%.

Тази публикация приключи. Абонирайте се за моя блог и не забравяйте да поканите приятелите си. Успех с изучаването на уеб езици! Чао чао!

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

Частичната прозрачност, когато се използва правилно, изглежда много впечатляващо в дизайна на уебсайта. Основното е, че под полупрозрачните блокове не трябва да има едноцветен модел, а изображение, в този случай прозрачността става забележима. Този ефект се постига по много начини и ако си спомняте всичко, включително старомодни методи, тогава това е използването на 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 формат. Но в същото време правилно се прилага към фоновия цвят. Като цяло, както винаги, трябва да избирате между браузъри и валидност.

Описание

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

Синтаксис

Цвят на фона:<цвет>| прозрачен | наследяват

Стойности

прозрачен Задава прозрачен фон. inherit Наследява стойността на родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Ориз. 1. Приложете цвят на фона

Обектен модел

document.getElementById("elementID ").style.backgroundColor

Браузъри

Internet Explorer до версия 7.0 не поддържа наследената стойност.