Как сделать изображение прозрачным html
Полупрозрачный фон
PNG в качестве фона
В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.
Рис. 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. Полупрозрачность текста и фона
Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.
background-color: rgba(r, g, b, a);
Пример 3. Использование RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Результат примера можно посмотреть на рис. 6.
Рис. 6. Полупрозрачный фон с непрозрачным текстом
Сравните картинку с предыдущей, буквы стали ярче и четче.
В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
CSS прозрачность – просто о важном
О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин « CSS прозрачность » (или css opacity ) тоже на слуху. Чаще всего эта методика используется для решения дизайнерских задач (посредством верстки), улучшения юзабилити ресурса.
Что можно сделать при помощи данной технологии?
Как задается прозрачность CSS: формальности
За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает « прозрачность »).
Данное свойство характеризуется следующими признаками:
Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:
Техническая сторона вопроса: задаем прозрачность фона
Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.
Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):
При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.
Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).
Видоизменяем код на такой:
Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.
Техническая сторона вопроса: задаем прозрачность блока
Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.
Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:
Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.
Дополнение
Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:
Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.
Надеемся, что данная статья оказалась для Вас действительно полезной.
Прозрачные изображения и прозрачный текст, альфа канал и свойство css opacity:
Здравствуйте уважаемые начинающие веб-мастера
Мы уже научились создавать фоновые изображения.
В этой статье поговорим о придании прозрачности изображениям, цвету, и тексту.
Для создания эффекта прозрачности в CSS применяются:
1. Формат RGBA — создаёт прозрачный цвет.
Аббревиатура RGBA включает в себя три цвета
б. G — green (зелёный);
г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.
Записывается следующим образом:
2. Свойство CSS opacity — делает прозрачным любой элемент контента.
Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.
Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.
Как видите, при подборе цвета, в правом нижнем углу, в соответствующих окнах, появляются цифры характеризующие выбранный цвет.
Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.
Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.
И добавим в эту вьюгу, прекрасную представительницу холодного царства.
Как видно из результата, получилась какая то аппликация, а не картина.
Чтобы исправить ситуацию, картинке с представительницей холода, нужно задать прозрачность, чтоб она как бы слегка растворилась и слилась с общим фоном.
Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.
Давайте зададим картинке прозрачность равную 0.1
Как видите, у вьюги проявилось лицо.
В продолжение темы, на этом изображении можно поместить какой либо текст, и так же сделать его прозрачным, а можно оставить и не прозрачным, на Ваше усмотрение.
Вот так можно создавать изображения и снабжать их надписями. Принцип думаю понятен, остальное будет зависеть от Вашего творческого воображения и полёта фантазии.
Давайте создадим блок с фоном, и напишем в нём прозрачный текст.
Вместо фона, можно вставить фоновое изображение и задать ему большую прозрачность, получится водяной знак.
Желаю творческих успехов.
Перемена
— Мама, мама! Вовка меня всю обрызгал!
— А ты его тоже обрызгай.
— Но, мама, как? Я же девочка!
— Официант! Почему в моей котлете волосы?
— Понимаете, у нас повар однорукий, он котлеты
на груди лепит, вот и налипли.
— Представляю, чем он у вас перец
фарширует!
Блог Vaden Pro
Способы создания прозрачных фонов
Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.
Как задать прозрачность?
Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:
CSS свойство Opacity
Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
В результате мы получили полупрозрачный блок:
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.
В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:
Формат системы RGBA
Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.
RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.
В уже известном нам примере, заменим содержимое в CSS файле на следующее:
Клетчатые изображения, или с уважением к истории
Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.
В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.
Подытожим?
Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:
Как сделать полупрозрачный фон в css
Дата публикации: 2016-03-08
От автора: приветствуем вас на нашем блоге, посвященном сайтостроению и веб-технологиям. В частности, сегодня мы поговорим о том, как сделать в css полупрозрачный фон и зачем это может быть нужно.
Полупрозрачность в веб-дизайне
В последнее время в сайтостроении активно применяются различные приемы, связанные с прозрачностью. Это позволяет создавать красивые шапки сайтов и множество различных декоративных элементов. Благодаря формату PNG-24 сегодня есть возможность вставлять на веб-страницу полупрозрачные изображения самых разных форм.
А что предусмотрено в самом css для использования полупрозрачных фонов? В последние годы в нем появилась возможность определять цвет текста или заднего плана в цветовом режиме rgba. Если вы работаете в графических редакторах, то наверняка знаете о нем. Цвет в rgba определяется так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Первые три значения записываются числовыми значениями от 0 до 255, где 255 – самая большая доля цвета. Прозрачность определяется по-другому – от 0 до 1. Если записать 0, то эффект будет такой же, как при background: transparent, то есть при полностью прозрачный фон.
Зачем все это нужно
Ну вот представьте, что вы определили для всей веб-страницы или отдельного блока какое-то фоновое изображение. Потом, если вы в этом родительском контейнере создадите новые блоки, то после определения оттенка для них изображение не будет видно на этих участках страницы.
Если же вам нужно, чтобы основной сплошной цвет просвечивался и через него было видно нашу картинку, то для этого и используется цветовой режим rgba. Например, я создам в html-документе два блока с произвольными идентификаторами.
Блоки идентичны друг другу во всем, кроме фона. Благодаря абсолютному позиционированию они стоят на одном и том же месте – в верхнем левом углу страницы, но поскольку блок #ct стоит в html-разметке последним, он полностью перекрывает своего товарища и на странице мы увидим просто желтый сплошной фон.
В то же время видим, что у #ab есть какая-то фоновая картинка, но мы ее не увидим, потом что у #ct не полупрозрачный фон и через него ничего не просвечивается. Все потому, что мы задали цвет в режиме rgb, а он не добавляет полупрозрачность, которая нам так нужна в данном случае. Давайте изменим стиль для #ct:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Обновляем страницу и видим вместо сплошного желтого более тусклый оттенок, а через него видно звездочки, которые и были фоновым изображением нашего блока #ab. Вот это и есть работа режима rgba.
Теперь давайте разбрем другой пример. Удалим один из блоков, а внутри оставшегося создадим дочерний элемент, которому тоже назначим свои стили.
Отцентрируем дочерний элемент, дадим фоновое изображение основному контейнеру и желаемый колер для блока внутри него. Опять же, из-за отсутствия полупрозрачности фон родителя не будет просвечиваться.
Теперь достаточно определить подходящий оттенок, который был бы схож с розовым (pink), только записать его в режиме rgba, добавим последним значением прозрачность. Переопределяем цвет фона для дочернего элемента:
Теперь, если обновить страницу, мы видим, что через цвет в дочернем блоке видно тот красивый орнамент, который задан для общего контейнера.
Где это может пригодиться в сайтостроении?
Хорошо, прием с полупрозрачностью мы с вами разобрали, а где он вообще применяется? Обычно его используют при создании так называемых масок у различных картинок, пунктов меню или товаров.
Наверняка вы видели на некоторых сайтах, как при наведении на элемент, на него как бы накладывался другой фон с каким-то содержимым. Но при этом если цвет этого накладываемого фона задать непрозрачным, то предыдущую картинку мы уже не увидим. Соответственно, это никуда не годится, поэтому используется полупрозрачный цвет, который и задают с помощью rgba.
Другим примером использования может быть тот, что вы могли видеть выше. У основного контейнера была красивая фоновая картинка. Соответственно, чтобы этот орнамент был виден и через фоновый цвет дочерних элементов, его также нужно записать в rgba.
Ну а как сделать полностью прозрачный фон в css? Выше я писал, что для этого можно записать свойство background: transparent, либо же задать 0 в качестве четвертого значения при записи цвета в режиме rgba. Другой прием – записать блоку свойство opacity со значением 0, но тогда весь блок будет прозрачным, то есть невидимым.
Больше информации вы можете узнать из нашего курса по css3, где есть соответствующий урок по полупрозрачности и свойству opacity. Смотрите и изучайте его, чтобы еще лучше разобраться в этих свойствах. На этом я заканчиваю статьи и желаю вам успехов в изучении веб-технологий. Оставайтесь с webformyself, чтобы узнавать еще больше.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3