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

Блог Vaden Pro

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

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

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

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

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

CSS свойство Opacity

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Подытожим?

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

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

    Полупрозрачный фон

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

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

    В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате 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. Имитация полупрозрачности

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

    Свойство opacity

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

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

    XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

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

    Читайте также  Как повысить аппетит у подростка

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

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

    Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат 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

    HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

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

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

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

    Как придать тексту или изображению прозрачный фон с помощью CSS?

    возможно ли, используя только CSS, сделать background полупрозрачного элемента, но имеют ли содержимое (текст и изображения) элемента непрозрачным?

    Я хотел бы выполнить это без текста и фона в виде двух отдельных элементов.

    похоже, что дочерние элементы подвергаются непрозрачности своих родителей, поэтому opacity:1 относительно opacity:0.6 из родитель.

    27 ответов

    либо используйте полупрозрачный PNG изображение или использование CSS3:

    В Firefox 3 и Safari 3 Вы можете использовать RGBA как Георг Schölly упомянул.

    малоизвестный трюк заключается в том, что вы можете использовать его в Internet Explorer, а также с помощью градиентного фильтра.

    первое шестнадцатеричное число определяет Альфа-значение цвета.

    полное решение всех браузерах:

    скриншоты доказательство результатов:

    Это при использовании следующего кода:

    Это лучшее решение, которое я мог бы придумать, не используя CSS 3. И он отлично работает на Firefox, Chrome и Internet Explorer, насколько я могу видеть.

    поместите контейнер DIV и два дочерних DIVs на одном уровне, один для содержимого, один для фона. И используя CSS, автоматический размер фона, чтобы соответствовать содержимому и поместить фон на самом деле в спину с помощью z-индекса.

    лучше использовать полупрозрачный .png .

    просто откройте Photoshop создать 2×2 изображения пиксель (комплектации 1×1 может вызвать ошибку Internet Explorer!), заполните его зеленым цветом и установите непрозрачность на вкладке «слои» на 60%. Затем сохраните его и сделайте фоновое изображение:

    это работает круто, конечно, кроме как в прекрасной Internet Explorer 6. Есть лучшие исправления, но вот быстрый взлом:

    для простого полупрозрачного цвета фона вышеуказанные решения (изображения CSS3 или bg) являются лучшими вариантами. Однако, если вы хотите сделать что-то более причудливое (например, анимация, несколько фонов и т. д.), или если вы не хотите полагаться на CSS3, вы можете попробовать «технику панели»:

    техника работает с помощью двух «слоев» внутри наружной панели элемента:

    • один («назад»), который соответствует размеру элемента панели без влияя на поток контента,
    • и один («cont»), который содержит содержимое и помогает определить размер панели.

    на position: relative на панели важна; он говорит задний слой, чтобы соответствовать размеру панели. (Если вам нужно

    тег, чтобы быть абсолютным, измените панель с

    до и оберните все это в абсолютно-положение

    главным образом преимущество этот метод имеет над подобными одними перечисленными выше что панель не должна быть заданного размера; как указано выше, она будет соответствовать полной ширине (обычный макет блока-элемента) и только до содержимого. Внешний элемент панели может быть изменен любым способом, если он прямоугольный (т. е. встроенный блок будет работать; обычный встроенный не будет).

    кроме того, это дает вам много свободы для фона; вы можете поместить действительно что-нибудь в задний элемент и не влиять на поток контента (если вы хотите несколько полноразмерных подслои, просто убедитесь, что они также имеют положение: Абсолют, ширина/высота: 100% и сверху/снизу/слева/справа: авто).

    один вариант, чтобы разрешить настройку фоновой вставки (через верхний / нижний / левый/ правый) и/или закрепление фона (путем удаления одной из левых/правых или верхних/нижних пар), должен использовать следующий CSS:

    как написано, это работает в Firefox, Safari, Chrome, IE8+ и Opera, хотя IE7 и IE6 требуют дополнительных CSS и выражений, IIRC и последний раз, когда я проверял, второй вариант CSS не работает в Opera.

    вещи, чтобы следить за:

    • плавающие элементы внутри слоя cont не будут содержаться. Вам нужно будет убедиться, что они очищены или иным образом содержатся, или они выскользнут из нижней части.
    • поля переходят на элемент панели, а заполнение — на элемент cont. Не используйте противоположное (поля на cont или заполнение на панели), или вы обнаружите странности например, страница всегда немного шире окна браузера.
    • как уже упоминалось, все это должно быть блоком или встроенным блоком. Не стесняйтесь использовать

    более полная демонстрация, демонстрирующая гибкость этой техники, используя ее в тандеме с display: inline-block , а как auto & specific width s/ min-height s:

    и вот live demo широко используемой техники:

    MnogoBlog

    как создать сайт на wordpress, настроить и оптимизировать wordpress

    Фиксированный и прозрачный фон сайта

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

    С помощью данного эффекта можно создать оригинальный дизайн сайта, для примера создадим вот такой:

    Демо пример можно посмотреть по данной ссылке:

    Но для начала приступим к теории.

    Давайте рассмотрим по отдельности каждое из этих свойств.

    1. Фиксированный фон сайта.

    Тег background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.

    Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

    Тег background-attachment может принимать следующие значения:

    fixed – Делает фоновое изображение элемента неподвижным.
    scroll – Позволяет перемещаться фону вместе с содержимым (используется по умолчанию).
    inherit – Наследует значение родителя.

    Для того, чтобы создать фиксированный, неподвижный фон сайта, необходимо прописать в файле стилей (style.css) следующую строчку:

    Причем данный тег можно использовать и для отдельных элементов сайта, таких например как div (блоки) и др.

    Данное свойство будет выглядеть намного эффектнее, если добавить вместо фона картинку с помощью следующего тега:

    Где ‘…/image.jpg’ – путь до фоновой картинки.
    Например так:

    Также нужно напомнить вам о теге background-repeat, который задает как будет повторяться фоновое изображение.
    Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
    Нам же для создания фиксированного фона сайта интересно следующее значение данного тега:
    no-repeat – Устанавливает одно фоновое изображение без его повторений.

    2. Прозрачность фона сайта.
    Здесь нам понадобится тег opacity.
    Он определяет уровень прозрачности элемента веб-страницы.
    При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

    Здесь следует указать то, что Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

    Но мы будем пользоваться именно тегом opacity, который работает во всех браузерах кроме Internet Explorer.

    Данный тег записывается следующим образом:

    Где x – может принимать значения в пределах 0.0 – 1.0. Меньшее значение делает элемент более прозрачным.
    Пример:

    Причем данный тег можно использовать и для отдельных элементов сайта, таких например как div (блоки) и др.

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

    Для создания данного эффекта нам понадобиться всего лишь загрузить фоновое изображение и подкорректировать файл стилей (style.css) шаблона (темы) сайта.

    Для примера, приведенного ниже, я буду использовать тему под названием “Europe”, данная тема есть на wordpress.org, поэтому чтобы ее установить или скачать достаточно в панели вашего сайта выбрать в левом меню пункт “Внешний вид”, далее подпункт “Темы оформления”, перейти на закладку “Установка тем оформления” и в строке поиска ввести Europe.

    Приступим!
    Открываем “Редактор” – для этого заходим в панель управления вашим сайтом, в левом меню выбираем пункт “Внешний вид” и внутри него подпункт “Редактор”.

    Справа в списке шаблонов выбираем файл style.css и открываем его.

    И ищем в его коде тег BODY.

    Теперь добавим к нему фоновое изображение и придадим фону свойство неподвижности (фиксированный фон):

    Где ‘http://mnogoblog2.16mb.com/wp-content/uploads/2012/08/124360.jpg’ – путь до фоновой картинки.

    Далее нам надо добавить для шапки, футера, контента и сайдбара (конкретно для его виджетов) свойство прозрачности.

    Изменяем прозрачность контента.
    Для этого находим тег content и меняем в нем следующий код:

    Изменяем прозрачность футера (подвала).
    Для этого находим тег footer и меняем в нем следующий код:

    Изменяем прозрачность сайдбара (более эффектнее будет поменять прозрачность виджетов сайдбара).
    Для этого находим тег widgets и меняем в нем следующий код:

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

    Можно найти следующий код:

    И поменять его на:

    Изменяем прозрачность шапки.
    Для этого находим тег header:

    Здесь я просто добавил строчки и получил следующее:

    Похожие записи:

    • Пишем игру на html5 код: Игра “Сколько предметов” (часть 5)
    • Украшаем сайт на Новый Год
    • Создаем форум с помощью плагина Mingle Forum
    • Twenty Twelve: настраиваем стандартную тему wordpress
    • Создаем простую тему на wordpress
    • 3D flash книга на сайт: плагин FlippingBook

    Фиксированный и прозрачный фон сайта : 14 комментариев

    На счёт прозрачности не так интересно..больше понравилось “как закрепить фон”

    Спасибо за содержательную статью. Собиралась в фотошопе делать полупрозрачные элементы, теперь сделаю с помощью стилей. Только вопрос: надо наверное как-то оптимизировать такую большую картинку? Чтобы сайт быстро загружался.

    Очень круто! Но как сделать чтоб только блок был прозрачным, а содержимое нет. А то у меня и текст в блоке и картинки тоже стали прозрачными…

    Для блоков можно попробовать сделать полупрозрачную png или gif фоновую картинку.

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

    У меня совсем ничего не получилось. Я бы заплатил, если бы кто-нибудь помог мне избавиться от этой проблемы. HELP ME.

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

    Спасибо вам большое! Благодаря вашей статье наконец получилось сделать прозрачность на сайте)

    Здравствуйте! Подскажите, пожалуйста, как изменить прозрачность, к примеру, новостной ленты (т.е. прозрачность фона для текста) не меняя прозрачность фоновой картинки и самого текста?

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

    Добрый день всем…Дело в том что у меня не получается найти в коде то что вы описываете…может тема сама все упрятала и не по тем местам? вы бы не могли мне помочь? а то я уже голову сломала)) зпранее спасибо

    тема у меня “Tempera” работаю на wordpress …как и где мне искать в коде то что отвечает за блок контента?((

    Спасибо за статью, на своем блоге не все применимо конечно, но некоторые идеи понравились)

    Огромное Вам спасибки за статью. Столько времени потратила на перебор интересной темы и все равно что-то не нравилось. Сейчас все настроила, прям красота

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

    Для отправки комментария вам необходимо авторизоваться.

    CSS прозрачность (Opacity vs RGBA)

    На этом уроке мы с вами разберем такие 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.

    Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти мой видео-курс.

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    спасибо за полезную статью.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

    Прозрачные изображения и прозрачный текст, альфа канал и свойство css opacity:

    Здравствуйте уважаемые начинающие веб-мастера

    Мы уже научились создавать фоновые изображения.

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

    Для создания эффекта прозрачности в CSS применяются:

    1. Формат RGBA — создаёт прозрачный цвет.

    Аббревиатура RGBA включает в себя три цвета

    а. R — red (красный);

    б. G — green (зелёный);

    в. B — blue (синий);

    г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.

    Записывается следующим образом:

    color : rgba(120 40 200 0,4); .

    2. Свойство CSS opacity — делает прозрачным любой элемент контента.

    Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.

    Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.

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

    Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.

    Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.

    И добавим в эту вьюгу, прекрасную представительницу холодного царства.

    Как видно из результата, получилась какая то аппликация, а не картина.

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

    Прозрачность для изображений создаётся свойством css opacity , и значения его принимаются от 0 до 1.

    Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.

    Давайте зададим картинке прозрачность равную 0.1

    Результат:

    Как видите, у вьюги проявилось лицо.

    В продолжение темы, на этом изображении можно поместить какой либо текст, и так же сделать его прозрачным, а можно оставить и не прозрачным, на Ваше усмотрение.

    Для этого в html части кода, разместим тег p с текстом, а в таблице стилей, создадим селектор p , и зададим ему необходимые свойства.

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

    Давайте создадим блок с фоном, и напишем в нём прозрачный текст.

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

    Желаю творческих успехов.


    Перемена

    — Мама, мама! Вовка меня всю обрызгал!
    — А ты его тоже обрызгай.
    — Но, мама, как? Я же девочка!

    — Официант! Почему в моей котлете волосы?
    — Понимаете, у нас повар однорукий, он котлеты
    на груди лепит, вот и налипли.
    — Представляю, чем он у вас перец
    фарширует!

    Понравилась статья? Поделиться с друзьями:
    Добавить комментарий

    ;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: