Выпадающее меню сайта KELL4.ru

Эффект прозрачности фона (HTML и CSS)

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.

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

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

opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.

HTML 5 CSS 3 IE 9
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>opacity</title> <style> body { background: url(images/cat.jpg); } div { opacity: 0.6; background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div>Создание и продвижение сайтов в интернете</div> </body> </html>

RGBA

В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.

Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета - синтаксис применения rgba.

Полупрозрачный фон
HTML 5 CSS 3 IE 9
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rgba</title> <style> body { background: url(images/cat.jpg); } div { background: rgba(0, 170, 238, 0.4); /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div>Создание и продвижение сайтов в интернете.</div> </body> </html>
Значение непрозрачности для фона установлено 90% - полупрозрачный фон и непрозрачный текст.
Веб студия KELL4 - разработка сайтов, оптимизация и продвижение

ПРИМЕР ПОЛУПРОЗРАЧНОСТИ ФОНА RGBA

Поисковая оптимизация сайта

Для того, чтобы сайт появился в поиске SEO оптимизация необходима, но перед этим пройти SEO аудит сайта нужно. А выяснить, что не так, помогут опытные SEOшники веб-студии КЕЛ ФО РУ. И отчет предоставят полный, да еще и возможности ресурса определят, а это в продвижении пригодится точно.

оптимизация сайта

Реклама на сайте

Внедряемые CMS

Joomla CMS

Универсальная система управления контентом

Wordpress CMS

Движок сайта для собственного блога

1C-Битрикс CMS

Панель управления для интернет магазина

LiveStreet CMS

Подходящая платформа для социальной сети

Заказать!
Следуй за мечтой

Внимание! Любое использование (распространение и копирование) материалов сайта без (документально подтвержденного) разрешения руководства веб-студии KELL4 Ltd. — ЗАПРЕЩЕНО (требуются документы подтверждающие использование материалов сайта или наличие партнерского договора на основе согласованных условий).

Реклама и Раскрутка в Интернете DARKSNOW Яндекс.Метрика Официальный партнер хостинг-провайдера NetAngels Рейтинг@Mail.ru Участник проекта CMS Magazine