Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Способы создания прозрачных фонов

Раздел: 

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как сделать блок прозрачным

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

  • Свойство opacity.
  • Использование PNG -картинки
  • Формат системы RGBA
  • Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" type="text/css" href="css/style2.css" />
    </head>
      <body>
  <div class=" prozrachen ">
   Тут будет много Вашего текста
  </div>
    </body>
</html>

CSS:

body {
    background: url(./vaden-pro-logo.png); /* Фон для тела страницы  */
   }
   . prozrachen {
    padding: 10px; /*Отступы для текста*/
    background: darkturquoise; /* Задаем цвет фона */
    margin: 0 auto; /* Центрируем блок */
    width: 50%; /* Задаем ширину блока */
 
    opacity: 0.7; /* Задаем прозрачность */
    font: 48px/64px Times New Roman;
    text-align: justify;
   }

В результате мы получили полупрозрачный блок:

метод opacity

Важно!!!

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) — 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

     
    filter: alpha(Opacity=70);
     

    Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

    • с абсолютным позиционированием (position: absolute)
    • с фиксированным линейным размером (height или width).
  3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше — нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

color: white;

и рассмотрим его под микроскопом:

прозрачность блока

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

  1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

    Метод png картинки

  2. Используем ее в качестве бэкграунда:

    body {
         background: url(./vaden-pro-logo.png);
         }
        .prozrachen {
         padding: 10px;
         background: url(./transparent.png);
         margin: 0 auto;
         width: 50%;
         font: 48px/64px Times New Roman;
        color: white;</li>
        text-align: justify;
       }

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Метод PNG

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность — придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

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

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body {
    background: url(./vaden-pro-logo.png); /* Фоновый рисунок  */
   }
   .prozrachen {
    padding: 10px;
    background: rgba(0, 206, 209, 0.7);
    margin: 0 auto;
    width: 50%;
    font: 48px/64px Times New Roman;
    color: white;
    text-align: justify;
   }

метод rgba

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

Метод клетчатой картинки

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Клетчатый фон

Важно!!!

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

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

Успехов!!!