Как установить прозрачность фона в css
Перейти к содержимому

Как установить прозрачность фона в css

  • автор:

opacity

Примечание: браузер IE8 и более ранние версии поддерживает альтернативное CSS свойство filter .

Пример: filter: Alpha(opacity=50);

Описание

CSS свойство opacity (в переводе с анг. — непрозрачность) устанавливает уровень прозрачности элемента. Прозрачность задаётся числом от 0 (полная прозрачность) до 1 (полная непрозрачность).

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

Прозрачность картинки задаётся также с помощью CSS свойства opacity , примеры и код вы можете посмотреть в нашем самоучителе в уроке «CSS: Прозрачность».

Если вам нужно установить прозрачность только для фона блока, то следует использовать CSS свойство background или background-color со значением цвета в формате RGBA или HSLA. Если нужно задать прозрачность только для текста, то следует использовать свойство color со значением цвета в формате RGBA или HSLA.

Значение по умолчанию: 1
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.opacity=0.5

Синтаксис

opacity: число|inherit;

Как установить прозрачность фона в css

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

    Теория и практика

    Реализуется данный подход с помощью свойства opacity. Предлагаю рассмотреть реальный практический пример и, отталкиваясь от него, будем изучать работу данного свойства. HTML

    div class="block"> img width="400" src="img.jpg"> div class="fon">div> div>
    .fon  display:block; position:absolute; top:0px; width:400px; height:275px; background:#5a7faf; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE 5.5+*/ -moz-opacity: 0.9; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.9; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.9; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ > .block  display:block; width:400px; margin:0px auto; >

    Практический пример прозрачности

    В браузере будет примерно такая картинка: Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса. Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов. Главная проблема в использовании этого свойства заключается в показателе его кроссбраузерности. Так как свойство считается относительно молодым, то старые версии некоторых браузеров могут конфликтовать с ним. Чтобы этого избежать, нужно воспользоваться следующими свойствами и скриптом:

    • filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); — этот код предназначен для оптимизации работы IE. Именно таким способом формируется прозрачность блоков в этих браузерах. Этот фильтр относится к Alpha DirectX, в отличие от обычного свойства, в этом фильтре непрозрачность устанавливается не в десятичных долях, а в процентах.
    • -moz-opacity — вендорное свойство, которое отвечает за прозрачность блоков в старых версиях Firefox.
    • -khtml-opacity — этот вендор оптимизирует работу свойства в Safari и Konqueror.

    К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

    Чуть не забыл отметить еще один каприз его величества Internet Explorer. В некоторых версиях может не пройти прозрачность, если не указаны ширина и высота контейнера. Но паниковать еще рано, так как этот баг легко можно исправить с помощью такой записи:

    zoom: 1;

    Это свойство должно относиться к стилю просвечиваемого блока.

    На заметку

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

    div class="block"> p>Контент, который просвечивать не надоp> div class="fon">div> div>
    .fon  display:block; position:absolute; top:0px; width:400px; height:275px; background: #5a7faf; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; > .block  display:block; width:400px; margin:0px auto; > p  text-transform:uppercase; text-align:center; position:relative; z-index:10; padding-top:100px; >

    Вот так будет выглядеть наше решение в браузере

    Не просвечивающийся контент

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

    Затемнение фона

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

    Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

    Наш предыдущий код принимает вид (HTML оставляем без изменений):

    .fon  display:block; position:absolute; top:0px; width:400px; height:275px; background: #5a7faf; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; > .block  display:block; width:400px; margin:0px auto; > p  text-transform:uppercase; text-align:center; position:relative; z-index:10; padding-top:100px; >

    По итогу получим вот такое затемнение

    затемненный фон

    В каких браузерах работает?

    6.0+ 1.0+ 9.5+ 3.1+ 2.0+

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

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

    Давайте разберемся, как можно сделать прозрачный фон для картинки с помощью редактора Adobe Photoshop . У меня установлена англоязычная версия Adobe Photoshop CS5, поэтому показывать буду на нем.

    Постараюсь приводить различные сочетания горячих клавиш.

    Если у Вас еще не установлен фотошоп, Вы им очень редко пользуетесь или он на английском, можете сделать прозрачный фон в Paint.net. Это простой русскоязычный редактор изображений, который займет не много места на жестком диске. Перейдя по ссылке, Вы можете прочесть подробную статью. Скачать программу Paint.net можно с нашего сайта.

    Для начала рассмотрим простой пример. Предположим, у Вас есть изображение на однотонном фоне, это может быть логотип или название чего-либо. Сделаем этот логотип или надпись на прозрачном фоне в фотошоп.

    Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой», нажмите в нем «ОК». После этого замочек исчезнет.

    Выбираем инструмент «Волшебная палочка». В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D».

    Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete».

    Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D».

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

    В этом случае, воспользуемся инструментом «Быстрое выделение». Кликаем по волшебной палочке левой кнопкой мыши с небольшой задержкой и выбираем из меню нужный инструмент.

    Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.

    Для просмотра результата нажмите «Q». Розовым будут выделены те части изображения, которые станут прозрачными.

    Копируем выделенные области, нажав «Ctrl+C». Дальше создаем новый файл, «Ctrl+N», с прозрачным фоном.

    Вставляем в него скопированные фрагменты, «Ctrl+V». Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик». Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.

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

    Прозрачность фона CSS

    Прозрачность фона на сайте создается через свойста CSS. Добиться прозрачности можо двумя способами: через свойство opacity и background:rgba(). Давайте рассмотрим каждый из них, а далее проведем сравнение.

    1. Свойство CSS opacity для прозрачности фона

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

    Задание прозрачности задается просто указанием вещественного числа от 0.0 до 1.0. Чем меньше число, тем менее заметен будет объект.

    opacity: 0.5; // Полупрозрачностьopacity: 0.2; // Объект виден только на 20%opacity: 0.8; // Объект виден только на 80%

    Давайте рассмотрим пример со свойством opacity.

    CSS Прозрачность изображения

    Свойство opacity определяет непрозрачность/прозрачность элемента.

    CSS opacity

    CSS свойство opacity может принимать значение от 0.0 — 1.0. Чем меньше значение, тем прозрачнее:

    Лес

    Лес

    Лес

    opacity 1
    (по умолчаню)

    Примечание: IE8 и более раннее использование filter:alpha(opacity=x) . x может принимать значение от 0 до 100 . Чем значение меньше, тем элемент более прозрачный.

    Пример
    img <
    opacity: 0.5;
    filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
    >

    Прозрачный эффект при наведении

    CSS свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении мыши:

    Северное сияние

    Горы

    Фьорды

    Пример

    img <
    opacity: 0.5;
    filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
    >

    img:hover opacity: 1.0;
    filter: alpha(opacity=100); /* Для IE8 и более ранних версий */
    >

    Объяснение примера

    Первый блок CSS похож на код в примере 1. Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение не было прозрачным, когда пользователь наводить на него курсор. Для этого примера CSS свойство opacity:1; .

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

    Пример обратного эффекта наведения:

    Северное сияние

    Горы

    Фьорды

    Пример
    img:hover <
    opacity: 0.5;
    filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
    >

    Прозрачный бокс

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

    Пример
    div <
    opacity: 0.3;
    filter: alpha(opacity=30); /* Для IE8 и более ранних версий */
    >

    Прозрачность с помощью RGBA

    Если Вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значение цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, а не для текста:

    Вы уже узнали от нашего раздела CSS Цвета, что можно использовать RGB в качестве значения цвета. Вкачестве дополнения к RGB, можно использовать значение цвета RGB с альфа-каналом (RGBA) — который задает прозрачность цвета.

    Значение цвета RGBA определяется с помощью: rgba(red, green, blue, alpha) . Параметр alpha является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

    Совет: Вы узнаете больше о цветах RGB в нашем разделе CSS3 Цвета.

    Пример
    div <
    background: rgba(76, 175, 80, 0.3) /* Зеленый фон с 30% прозрачности */
    >

    Текст в прозрачном поле

    Это некоторый текст, который помещается в прозрачное поле.

    Пример

    div.background background: url(klematis.jpg) repeat;
    border: 2px solid black;
    >

    div.transbox margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* Для IE8 и более ранних версий */
    >

    Это некоторый текст, который помещается в прозрачное поле.

    Во-первых, сначало мы создаем элемент с class=»background» с фоновым изображением и границей. Затем мы создаем другой ( class=»transbox» ) внутри первого . У class=»transbox» есть цвет фона и граница — является прозрачным. Внутри прозрачного , мы добавляем некоторый текст внутри элемента

    .

    Мы только что запустили
    SchoolsW3 видео

    курс сегодня!

    Сообщить об ошибке

    Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

    Ваше предложение:

    Спасибо Вам за то, что помогаете!

    Ваше сообщение было отправлено в SchoolsW3.

    Schoolsw3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

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

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