Как сделать изображение полупрозрачным css
Полупрозрачный фон
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: Подробное руководство
Сколько раз было такое, что нужно было во время верстки сделать какой-то элемент прозрачным или полу прозрачным, причем после этого естественно идешь в Google и начинаешь тупо гуглить.
В рамках этого поста я расскажу и покажу как можно настроить прозрачность абсолютно любого объекта на сайте, не важно, что это картинка или видео, ну с текстом и фоном понятно, что это возможно тот самый минимум, прозрачность которого мы хотим добиться.
В CSS в основном есть три способа задать прозрачность любому блоку или объекту, но все эти способы отличаются по назначению, которое по правде зависит от вашей задачи.
Для всех примеров я буду использовать следующий пример:
В нем есть все что нужно, это картинка кнопка, блок целый сзади которого есть еще какой-то блок, у которого белый цвет.
В общем если что-то понадобится дополнительно, то естественно я добавлю что-то, но в целом это не обязательно.
Полная прозрачность с помощью visibility: hidden
Вот давай представим есть у нас следующий случай, когда нужно просто сделать объект полностью прозрачным, но при этом сохранить за собой место?
Для таких случаев вполне уместно использовать visibility: hidden
Как мы видим блок полностью исчез, но сразу возникает вопрос, а чем этот способ отличается от display: none или opacity: 0;
В целом этому есть очень внятное объяснение. Все они делают элементы невидимыми, но отличаются тем, занимают ли после применения место и использует ли они клики.
Вот к примеру, если вам нужно сделать этот блок полностью прозрачным, и при этом чтобы пользователь не имел возможности управлять объектами, которые находятся внутри, то ь visibility: hidden то что тебе нужно. Если это сделать с помощью display: none; то объект на который мы применили его, пропадет полностью будто бы мы удалили и html (при просмотре кода, сам код останется на месте).
А вот если вы решите сделать объект opacity: 0, пусть все и пропадет у пользователя из виду, но элементы будут активными, то есть текст можно будет выделить, а кнопки нажать, а картинку сохранить. Вот как это выглядит:
Есть разница правда?
Управление прозрачностью с помощью Opacity;
Из предыдущего примера можно увидеть, что свойство opacity всегда оставляет за собой возможность выполнять с объектом какие-то события, на пример выделение клики и так дальше, в целом все события, которые есть и у любого другого объекта в целом.
И при всем этом, мы можем задать любую интенсивность для прозрачности объекта. А значит, сделать текст или картинку полупрозрачной, или вообще прозрачной. Да в целом нет такого элемента на сайте, с которым opacity не будет работать, я даже попробовал видео на youtube сделать прозрачным и у меня получилось.
Если сравнить этот пример с самым первым элементом, то можно уверенно сказать, что прозрачность задана всем обьектам – так и есть.
Я задал прозрачность каждому, но при этом разную, например, у текста применено opacity: 0.9; вместе с ним возникает ощущение, будто мы сделали текст немного светлее, но цвет, как и был стандартным черным так и остался.
Для кнопки я за дал opacity: 0.7;, а для картинки opacity: 0.5; и это вообще заметно.
Как это можно применить на деле? Очень просто, бывало я задаю блокам легкую прозрачность, а вот когда наведем мышку на этот блок, то с помощью hover я задаю полную яркость, ну в общем получается круто.
Как сделать прозрачный фон через rgba?
Вот еще один интересный способ, с которым можно задать прозрачность каждому объекту, которому через css мы задаем цвет.
Если стандартно мы задавали тексту цвет как-то так color: #20262e; в котором мы имеем три части
#(20 – насыщенность красного)(26 насыщенность зеленого)(2e и насыщенность синего)
По факту этот тип записи называется HEX (потому что значение в 16-тиричной системе счисления от 0 до F).
Поменять эту систему можно на другую, вместо HEX использовать RGB, смысл с ней не меняется, меняется только то как мы его записываем.
В стиле RBG запись будет следующей: rgb(32, 38, 46); это все тоже самое что и #20262e просто записано по другому.
Так вот, о чем это я – сюда можно добавить еще одно значение, а именно степень прозрачности.
Получается такая запись: rgb(32, 38, 46, 1), ну а это единицу, можно уже изменять так как нам угодно. Все это очень круто позволяет изменять Console Google Chrome
А после мы можем менять буквально все что нам угодно, например, я сейчас сделаю основной фон зеленым, а фон нашего блока красным, так получится мне наглядно показать, как это будет отображаться.
Получается такая картинка – очень рекомендую поиграться с этим делом, например, поставить цвет другой, или добавить прозрачный фон блока или еще можно добавить к блоку какой-то border, ну и задать какой-то интересный цвет, а после поиграться с его прозрачностью.
Если тебе статья показалась полезной, то не забудь поделиться ею с своей социальной сети, ну а сайт сохрани себе куда-нибудь в закладки. Это будет твоим небольшим спасибо мне, ну к тому же ты не потеряешь мой сайт и всегда сможешь научиться еще чему-то новому.