На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA . Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.
CSS прозрачность Opacity
Цифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот - абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.
Прозрачность через CSS Opacity
На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон.
Div {
background: url(images/yourimage.jpg); /* Фон картинка */
width: 750px;
height: 100px;
margin: auto;
}
.blue {
background: #027ав4; /* Цвет полупрозрачного фона */
opacity: 0.3; /* Значение полупрозрачности фона */
height: 70px;
}
h1 {
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}
CSS прозрачность в формате RGBA
Формат для записи цвета RGBA , является более современной альтернативой для свойства opacity . R (red), G (green), B(blue) – значит: красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.
Теперь давайте рассмотрим наш пример с использованием RGBA . Заменим эти строчки в стилях.
Background: ##027ав4; /* Цвет фона */
opacity: 0.3; /* значение полупрозрачности фона */
на следующую одну строку
Background: rgba(2, 127, 212, 0.3);
Как вы видите значение прозрачности 0.3 совпадает у обоих методов.
Результат примера с RGBA:
Второй скриншот намного лучше смотрится, чем первый.
Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов. Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен. Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3 , реализовывался он чисто в графических программах.
Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer , тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.
Вывод
Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer . Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS .
Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти .
С приходом CSS3 работа верстальщиков во многом стала проще и логичнее: ведь теперь можно действительно гибко настроить какой-либо объект, все реже прибегая к JavaScript. Допустим, вам надо настроить прозрачность фона — CSS тут же предлагает несколько вариантов.
Фон задается набором атрибутов , background-repeat, background-attachment, background-origin, background-clip, background-color), причем каждый из них можно прописать отдельно или же объединить под атрибутом background. Разберем каждый из них подробнее.
Атрибут background-color
Такой способ поддерживает даже IE8. Несколько изображений в качестве фона используются при резиновой верстке. Главное, не забывайте при использовании любого изображения также задавать в CSS цвет фона, так как у пользователей может просто не загрузиться картинка.
Атрибут background-position
Если вы используете изображение, чтобы задать фон блока, CSS позволит вам расположить картинку в любом месте экрана. По умолчанию изображение располагается в левом верхнем углу. Атрибут принимает либо словесные указания (top, bottom, left, right), либо численные (проценты, пиксели и другие единицы измерения). При этом необходимо указать два значения: по горизонтали и по вертикали:
body {background-position: right center;} — в этом примере фон будет располагаться в правой части страницы, причем снизу и сверху расстояния до изображения одинаковы.
Атрибут background-size
Иногда требуется с помощью CSS растянуть фон или уменьшить его размер. Для этого используют атрибут background-size, причем размер фона можно задать как в пикселях или процентах, так и в любых других единицах измерения.
С этим атрибутом есть некоторые проблемы: для корректного отображения фона в ранних версиях браузеров необходимо использовать префиксы. Конечно, актуальные версии полностью поддерживают этот атрибут и необходимость в специфических свойствах отпала.
Атрибут background-attachment
Этот атрибут задает поведение фонового изображения при прокрутке. Так, он может принимать 3 значения (не учитывая inherit, общего для всех представленных в этой статье атрибутов):
- fixed — делает картинку на фоне неподвижной;
- scroll — фон прокручивается вместе с остальными элементами;
- local — изображение на фоне прокручивается, если прокрутку имеет содержимое. Фон, который выходит за рамки содержимого, фиксируется.
Пример использования:
body {background-attachment fixed}.
В настоящее время Firefox не поддерживает последнее свойство (local).
Атрибут background-origin
Этот атрибут отвечает за позиционирование элемента. Браузеры ранних версий требуют использования префиксов. Само свойство имеет три параметра:
- padding-box позиционирует фон относительно края, при этом учитывая толщину рамки;
- border-box отличается от предыдущего свойства тем, что линия границы может полностью или частично перекрывать фон;
- content-box позиционирует изображение, прявязывая его к контенту.
Если задано несколько значений, то браузеры могут реагировать по-своему: Firefox и Opera воспринимают только первый вариант.
Атрибут background-repeat
Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:
- no-repeat — изображение появляется на странице в единственном варианте;
- repeat — фон повторяется по осям x и y;
- repeat-x — только по горизонтали;
- repeat-y — только по вертикали;
- space — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
- round — изображение масштабируется, если не получается всю область заполнить целыми картинками.
Пример использования атрибута:
body {background-repeat: no-repeat repeat} — аналогично background-repeat: repeat-y.
В CSS3 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.
Атрибут background-clip
Этот атрибут определяет поведение фона под границами (например, в случае пунктирных рамок):
- padding-box — фон отображается строго внутри блока;
- border-box — изображение заходит под рамки;
- content-box — картинка на фоне появляется только внутри содержимого.
Пример использования:
body {background-clip: content-box;}.
Chrom и Safari требуют использования префикса -webkit-.
Атрибуты opacity и filter
Атрибут opacity позволяет задать прозрачность фона — CSS свойство будет работать во всех браузерах. Значение устанавливается в пределах от 0.0 до 1.0 включительно. При этом вы можете установить прозрачность фона CSSбез целого значения: вместо 0.3 достаточно написать.3:
.block {background-image: url(img.png); opacity: .3;}.
Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:
.block {background-image: url(img.png); filter: alpha(opacity=30);}.
В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.
Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.
Подробности Категория: вебдизайнер Автор: SEO & WEB - KELL4Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.
Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.
Рассмотрим полупрозрачность текста и фона - как правильно ее использовать в дизайне сайта:
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду 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
Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок 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 |
|
Однако такой способ не удобен по нескольким причинам:
- Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
- Нельзя видоизменять цвета фона в css;
- Если в браузере отключена функция отображения изображений, то исчезнет.
Способ 3. Пропиаренный
Наиболее распространенный и всем известный способ сделать какой-либо блок прозрачным является свойство opacity .
Значение параметра варьируется в диапазоне , где при 0 объект невидим, а при 1 – отображается полноценно. Однако и здесь есть некие неприятные моменты.
Во-первых, все дочерние элементы наследуют прозрачность. А это значит, что вписанный текст также будет «просвечиваться» вместе с фоном.
Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity .
Для решения этой проблемы используется filter: alpha (Opacity=значение) .
Рассмотрим пример.
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 выдает ошибку при сочетании свойства background-color с названием цветов (background-color: gold). Поэтому стоит использовать только:
background-color: 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%.