Прозрачный цвет css


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

 

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


Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка 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.ru

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent, то цвет будет полностью прозрачным, то есть невидимым. Пример:

color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

background: rgb(230, 121, 156);

Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

background: rgba(0, 0, 0, 0);  

В таком случае остальные 3 цифры особой роли не играют.

Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в этой статье, можете ознакомиться, если интересно.

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba.

В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.

Надеюсь, вы запомните и воспользуетесь для себя каким-нибудь из этих трех способов. А у меня на этом все.

dolinacoda.ru

Атрибут background-color


В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

body {background-color: #cf0;}.

Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

body {background-color: purple;}.

Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

css цвет фона

Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии. Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

Атрибут background-image


Наиболее кросс-браузерный вариант прозрачного фона — это использования изображения. В CSS3 можно задать даже несколько изображений, делается это через запятую. Пример:

body {background-image: url(bg1.png), url(bg2.png)}.

Такой способ поддерживает даже IE8. Несколько изображений в качестве фона используются при резиновой верстке. Главное, не забывайте при использовании любого изображения также задавать в CSS цвет фона, так как у пользователей может просто не загрузиться картинка.

Атрибут background-position

Если вы используете изображение, чтобы задать фон блока, CSS позволит вам расположить картинку в любом месте экрана. По умолчанию изображение располагается в левом верхнем углу. Атрибут принимает либо словесные указания (top, bottom, left, right), либо численные (проценты, пиксели и другие единицы измерения). При этом необходимо указать два значения: по горизонтали и по вертикали:

CSS растянуть фон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.

Фон блока CSSВ 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 прозрачным становится не только фон, но и все элементы внутри блока.


задать прозрачность фона CSS

Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.

fb.ru

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Изображение для создания фона

Рис. 1. Изображение для создания фона

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

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Прозрачность в слое</title>  <style type="text/css">  BODY {  background: url(images/star.png); /* Фоновый рисунок */  }  .semiopacity {  padding: 5px; /* Поля вокруг текста */  background: url(images/opacity.png); /* Полупрозрачный фон */  }  </style>  </head>  <body>  <div class="semiopacity">  Магнитное поле, это удалось установить по характеру спектра, выслеживает   космический метеорит, день этот пришелся на двадцать шестое   число месяца карнея, который у афинян называется метагитнионом.  </div>  </body> </html>

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

Применение фонового рисунка

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

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

Клетчатое изображение

Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.

Увеличенный клетчатый рисунок

Рис. 3. Увеличенный клетчатый рисунок

Вот как в итоге это выглядит (рис. 4).

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

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

Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Прозрачность в слое</title>  <style type="text/css">  BODY {  background: url(images/star.png); /* Фоновый рисунок */  }  .semiopacity {  background: #0078c9; /* Цвет фона */  padding: 5px; /* Поля вокруг текста */  opacity: 0.7; /* Полупрозрачный фон */  filter: alpha(Opacity=70); /* Прозрачность в IE */  color: #fff; /* Цвет текста */  }  </style>  </head>  <body>  <div class="semiopacity">  Магнитное поле, это удалось установить по характеру спектра, выслеживает   космический метеорит, день этот пришелся на двадцать шестое   число месяца карнея, который у афинян называется метагитнионом.  </div>  </body> </html>

Результат примера показан на рис. 5.

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

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

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

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Полупрозрачный фон</title>  <style>  body {  background: url(images/star.png); /* Фон веб-страницы */  }  .transparent {  background-color: rgba(0, 120, 201, 0.7); /* Цвет фона и значение прозрачности */  padding: 10px; /* Поля вокруг текста */  color: #fff; /* Цвет текста */  }  </style>  <!--[if lt IE 9]>  <style type="text/css">  .transparent {  background-color: #0078c9;  filter: alpha(Opacity=70); /* Прозрачность в IE */  }  </style>  <![endif]-->  </head>  <body>  <div class="transparent">  Исполинская звездная спираль с поперечником в 50 кпк,   это удалось установить по характеру спектра, прекрасно иллюстрирует метеорный  дождь, тем не менее, Дон Еманс включил в список всего 82 Великие Кометы.  </div>  </body> </html>

Результат примера можно посмотреть на рис. 6.

Полупрозрачный фон с непрозрачным текстом

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

div {  background-color: red; /* В IE7 не применяется */  background-color: rgba(255, 0, 0, 0.5); }

Решается это заменой свойства background-color на background.

div {  background: red; /* А это работает */  background: rgba(255, 0, 0, 0.5); }

Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.

htmlbook.ru

Тип свойства

Назначение: цвет и фон.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства background-color является указание цвета одним из следующих вариантов:

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
  • inherit — наследует значение background-color от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: transparent.

Рекомендую вам никогда не указывать цвета по их именам, так как некоторые браузеры присваивают одному и тому же имени разные цвета. А также всегда и на всех HTML-страницах задавать явно цвет текста и фона, на случай, если у пользователя в браузере по умолчанию стоят нестандартные настройки. Например, это можно сделать, сразу указав цвет текста и фона для тега <BODY>.

Синтаксис

Пример CSS: использование background-color

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>seodon.ru - CSS свойство background-color</title>  <style type="text/css">  body {  color:#000000; /* цвет текста на странице */  background-color: #ffcc66; /* цвет фона */  }  h1 {  background-color: RGB(204, 102, 255); /* фон заголовка H1 */  }  h2 {  background-color: #66ffcc; /* фон заголовка H2 */  }  </style>  </head>  <body>  <h1>Заголовок H1</h1>  <h2>Заголовок H2</h2>  </body> </html>

Результат примера

Результат. Использование свойства CSS background-color.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

spravka.seodon.ru

В CSS есть три способа изменить прозрачность элемента:
с помощью свойства opacity,
с помощью функции rgba(),
с помощью функции hsla().

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity, содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

h1 {color: #CD6829;}  div {  background: #CDD6DB;  opacity: .3;  }
opacity
Рис. 1. Прозрачность элементов с помощью opacity

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

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red), зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity, для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

R4mXe
Рис. 2. Цветовая модель RGB
h1 {color: #CD6829;}  div {background: rgba(205, 214, 219, 0.3);}
rgba
Рис. 3. Прозрачность элементов с помощью функции rgba()

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

Функция hsla(), параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha), также позволяет задать полупрозрачный цвет.

Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:

0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет.

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1). Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1), а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1).

color-circle
Рис. 4. Цветовая модель HSL

Удобный конвертер цветов вы найдете здесь.

html5book.ru

Задача

Сделать кроссбраузерный полупрозрачный цвет.

Решение

Первая мысль в данной ситуации — использовать для фона png24-картинку с уже заданной полупрозрачностью. Но эта картинка совершенно лишняя. Можно прекрасно обойтись и без нее (а значит без лишнего запроса к серверу). Давай все-таки попробуем найти оптимальное решение.

Вторая мысль — использовать CSS-свойство opacity. Но в данном случае это не очень удобно. Ведь полупрозрачным тогда станет не только фон, но и надписи. Да, собственно, все окошко сразу.

Конечно, можно попробовать добавить дополнительный контейнер и применять opacity только к нему, но этот HTML-элемент будет предназначен только для оформления и явно будет лишним. Можно ли обойтись без него?

Конечно можно! Если использовать RGBA.

Формат описания цвета RGBA

CSS3 позволяет задавать цвет, используя функции RGB и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255, вдруг кто не знает).

Синтаксис у этого дела очень простой:

Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).

Вот оно, решение нашей задачки. Достаточно задать цвет фона с помощью rgba и все будет выглядеть как нам нужно. Без лишних картинок и элементов!

А где мне взять эти циферки?

Посмотреть на составляющие цвета можно используя инструмент фотошопа «пипетка»

О кроссбраузерности

Так как функция RGB значительно старше, чем RGBA и присутствует еще со времен стандарта CSS2, то для подстраховки от самых древних браузеров можно использовать такую дублирующую конструкцию:

При таком подходе у прадедушек современных браузеров не будет полупрозрачности, но сам цвет останется правильным.

Отдельно придется позаботиться об IE. Ослоподобные аж до 8-ой версии включительно не понимают RGBA.

Как всегда: землю — крестьянам, фабрики — рабочим, а ослам — костыль! В виде фильтра gradient.

Само собой, в боевых условиях выносим это правило в отдельный CSS, который подключаем условными комментариями.

Фишка в том, чтобы указать начальный и конечный цвета одинаковыми (ff0000 — красный) и воспользоваться тем, что для градиента в этом фильтре можно задать альфаканал (в примере значение 80).

Для справки: в фильтре используется шестнадцатеричная система и полностью непрозрачному цвету соответствует код FF (в десятичной это 255). Соответственно шестнадцатеричное 80 — это десятичное 128, т.е 50% прозрачности.

Демонстрационный пример.

Проверено в:

  • IE 6-9
  • Firefox 3+
  • Opera 10+
  • Safari 4
  • Chrome

xiper.net

Как сделать прозрачный фон в css

От автора: приветствую вас на страницах блога webformyself. Сегодня я хотел бы вам рассказать, как можно сделать прозрачный фон. Css реализует такой прием очень легко, причем есть несколько вариантов, как это сделать.

Прозрачность в сайтостроении

Для начала стоит для себя уяснить, что цвет может быть полностью прозрачным (по сути, невидимым) и полупрозрачным. Это когда его немного видно, а через него могут быть видны другие элементы веб-страницы.

Как реализуется

Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:

Нужному элементу задаем такое правило и все будет работать. Второй вариант:

Цветовой режим rgba является усовершенствованной версией rgb, только тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полностью прозрачный цвет. Таким образом, rgba является отличной возможностью для задания полупрозрачного фона.

Зачем все это нужно?

Казалось бы, а почему цвет не установить как белый, и тогда его и так не будет видно? Да, но тут важно помнить, что по дизайну все сайты разные.

Если фоновый цвет всей страницы или отдельных крупных структурных блоков отличен от белого, то такой метод уже не подходит.

По умолчанию у блочного элемента при его создания нет явного фона, он полностью прозрачный. Убедиться в этом легко – создайте на пустой странице блок, определите ему какие-то размеры (ширину и высоту), больше ничего не задавайте. Увидите ли вы что-то на странице? Нет.

Полупрозрачность

Наверняка эта возможность интересует вас намного больше, потому что она позволяет добиваться интересных эффектов. Во-первых, таким образом можно добиться нужных оттенков, более мягких и приглушенных. Например, если записать в качестве цвета что-то вроде этого:

Прозрачный цвет css

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

Прозрачный цвет css

Мы указали полупрозрачность, так что он стал намного более тусклым.

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

Прозрачный фон может пригодится там, где вы даже не думали. Например, стандартный способ создания треугольника через css заключается в том, чтобы блоку задать нулевую ширину и высоту, после чего указать с трех сторон прозрачные рамки, а с одной стороны выбрать такой цвет, который вам нужен. В итоге получаем треугольник.

В целом, это все что я хотел сказать вам сегодня об этом приеме. Дополнительные сведения о прозрачности вы можете найти в курсе по css3, а я на этом заканчиваю статью.

Прозрачный цвет css

webformyself.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.