Прозрачность в css: CSS: прозрачность фона и картинки

Leave a Comment / Css / By /

Прозрачность opacity

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

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

Свойство opacity принимает значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее элемент:

opacity 0.2

opacity 0.5

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

img {
  opacity: 0.5;
}

Изменение прозрачности при наведении мыши

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

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
Объяснение примера

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

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

Ниже пример с обратным эффектом:

img:hover {
  opacity: 0.5;
}

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

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

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Пример:

div {
  background-color: green;
  opacity: 0.3;
}

Определение прозрачности при помощи RGBA

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

100% opacity

60% opacity

30% opacity

10% opacity

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

RGBA значение цвета определяется CSS функцией rgba(red, green, blue, alpha). Параметр alpha — это число от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).

Подробнее о RGBA цветах вы можете прочитать в главе RGB цвета.

Пример:

div {
  background: rgba(76, 175, 80, 0.3) /* Фон зеленого цвета с 30% прозрачностью */
}

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

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

<html>
<head>
<style>
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;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div>
  <div>
    <p>Это кое-какой текст, размещенный в прозрачном блоке.</p>
  </div>
</div>
</body>
</html>
Объяснение примера

Сначала мы создаем элемент <div> (class=»background») с фоновым изображением и рамкой.

Затем мы создаем еще один элемент <div> (class=»transbox») внутри первого элемента <div>.

У элемента <div> есть фоновый цвет и рамка, сам элемент прозрачный.

Внутри прозрачного элемента <div> мы добавили кое-какой текст, обернутый в тег <p>.

технология интернета, html, css, javascript, прозрачность, Виктор Кон

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

Очень мощным средством оживления обьектов сайта является манипулирование с прозрачностью. Я уже немного писал об этом в конце главы про Основы DHTML. Я не буду повторять то, что там написано, и советую еще раз внимательно прочитать эту главу. Здесь же я покажу как это можно использовать для оживления сайта. С учетом того, что прозрачность задается по разному в стандартных браузерах и в Экплорере, этот параметр вообще удобно задавать только в коде Javascript. Более того, его могут иметь все объекты, не только

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

Идея примера следующая. Размещаем две картинки в одном и том же месте, одну над другой. Но сразу делаем так, что нижняя картинка показывается, а верхняя прозрачная, как стекло. После клика на кнопке постепенно меняем параметр прозрачности от 0 до 1, и вот уже верхняя картинка видна, а нижняя под ней, естественно, не видна, хотя она вовсе не прозрачная. А в процессе перехода видны обе в смешанном состоянии. Как обычно, я даю полный код сайта и потом его объясню. Этот текст можно скопировать в файл с расширением htm и запустить на исполнение, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С.

Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.

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

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


</body></html>

Этот код может быть чуть сложнее, чем остальные. Здесь в теге javascript уже 5 функций. Первая функция param() имеет стандартное название, а именно, задать стартовые значения параметров. Как я уже говорил, параметр прозрачности проще всего сразу задавать javascipt кодом, вот это и делается раздельно для браузера Интернет Экплорер и для остальных. Вторая функция опять стандартная, она обеспечивает движение или процесс, следующие две функции вызываются по кнопкам. Последняя стандартная. На сайте у нас стандартное окно, а в нем две картинки. Файлы картинок находятся в интернете, поэтому для нормальной работы программы компьютер должен быть подключен в мировую сеть. Я просто взял две фотографии размером 640*480, но вертикальный размер окна всего 100, поэтому вертикальная позиция картинок задана так, чтобы в окно попала самая интересная часть. Ну а все, что за пределами окна не видно. Теги картинок имеют разные значения параметра

id и по этим значениям формируется массив переменных-ссылок на параметры style этих картинок. В нашем примере картинок всего две и массив можно было бы не делать, я просто хотел показать как работают с массивом. Когда картинок много, то из них тоже делается массив и адресация картинок происходит несколько иначе. Ну и в конце запускается функция param().

Теперь посмотрим как это работает. Функция param() просто задает стартовые значения параметра прозрачности таким образом, что нижняя картинка видна, верхняя — нет. И программа спит. Однако по клику на кнопке [Change] запускается функция one(). Она обнуляет счетчик, задает значение паузы, задает направление процесса и запускает функцию move(). Эта функция

nm раз увеличивает значение параметра прозрачности второй картинки таким образом, что оно поднимается от 0 до 1. После этого значение паузы делается очень большим и функция перестает работать. Программа опять спит. Но если кликнуть вторую кнопку Restore, то все повторится, только процесс пойдет в обратном направлении. Вот и все. Ясно, что такая программа имеет только учебное (демонстрационное) значение. Но она показывает как делать плавный переход от одной картинки к другой с медленным изменением прозрачности. А это уже можно использовать в анимациях. Более того, такой переход является одним из многих в моей программе Слайд-шоу. Об этом речь будет идти в других статьях.

Автор: Виктор Кон, 9.09.2013

 

   

opacity · WebPlatform Docs

Резюме

Свойство opacity управляет прозрачностью и непрозрачностью элемента. Его значения находятся в диапазоне от 0 до 1. Принимая значения по умолчанию на родительском уровне, элемент с непрозрачностью 1 является полностью непрозрачным, тогда как элемент с непрозрачностью 0 полностью прозрачен. Непрозрачность, используемая при рендеринге элемента, является произведением его непрозрачности и непрозрачности его предков.

Обзорная таблица

Исходное значение
1
Применяется к
Все элементы
Унаследовано
Нет
СМИ
визуальный
Расчетное значение
[[Вычисляемое значение:: То же, что и указанное значение после обрезки <альфа-значения> до диапазона [0.0,1.0]]]
Анимируемый
Да
Свойство объектной модели CSS
непрозрачность
Проценты
Н/Д

Синтаксис

  • непрозрачность: альфа-значение
  • непрозрачность: наследовать

Значения

альфа-значение
Значение с плавающей запятой в диапазоне от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный) включительно. Любые значения вне диапазона будут зафиксированы в этом диапазоне.
унаследовать
Указывает, что свойство принимает то же вычисленное значение, что и свойство родительского элемента.

Примеры 

 .пример1 {
  непрозрачность: 0,5;
}

Просмотреть живой пример

Использование 

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

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

Примечания

Параметр непрозрачности применяется равномерно ко всему объекту. Любые значения за пределами диапазона от 0,0 до 1,0 будут ограничены этим диапазоном.

Непрозрачность объекта или группы концептуально можно рассматривать как операцию постобработки. Концептуально, после рендеринга объекта или группы в закадровое изображение RGBA параметр непрозрачности объекта или группы указывает, как смешать закадровое изображение с текущим фоном.

Обратите внимание, что установка для этого свойства значения меньше 1 создает новый контекст стека. Для получения дополнительной информации см. «Что вам никто не говорил о Z-индексе» Филипа Уолтона.

Связанные характеристики

Модуль цвета CSS, уровень 3
Рекомендация

См. также

Статьи по теме

Визуальные эффекты

  • цвет

  • Цвета по оттенку

  • Цвета по названию

  • Цвета по насыщенности

  • Пользовательские системные цвета

  • -мс-высокая контрастность

  • мс-высокая контрастность-регулировка

  • -ms-прогресс-внешний вид

  • фоновый режим наложения

  • зажим

  • курсор

  • непрозрачность

  • зум

  • высота

  • мигает

  • фильтр

  • Анимация JavaScript

Связанные страницы

  • CSSStyleDeclarationCSSStyleDeclaration
  • текущий стиль текущий стиль
  • стильстиль
  • по умолчаниюпо умолчанию
  • среда выполненияStyleruntimeStyle
  • аа

Атрибуции

  • Новички
  • Концепции
  • HTML
  • УСБ
  • Доступность
  • JavaScript
  • ДОМ
  • СВГ

Непрозрачность CSS3 | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Непрозрачность CSS3

— РЕК

  • Глобальное использование
    99,17% + 0,08% «=» 99,25%

Метод установки уровня прозрачности элемента

Chrome
  1. 4 — 109: Поддерживается
  2. 110: Поддерживается
  3. 111 — 113: Поддерживается
Edge
  1. 12 — 109: Supported
  2. 110: Supported
Safari
  1. 3.1 — 16.2: Supported
  2. 16.3: Supported
  3. 16. 4 — TP: Supported
Firefox
  1. 2 — 109: Поддержано
  2. 110: Поддерживается
  3. 111 — 112: Поддерживается
Opera
  1. 9 — 94: поддержан
  2. 95: Поддержка
IE
75. 9025
    .9028.
      .
        .
          .9028
            .
              .
                .
                  .
                    . 9025.
                      . 9023.0052
                    1. 9 — 10: Supported
                    2. 11: Supported
                    Chrome for Android
                    1. 110: Supported
                    Safari on iOS
                    1. 3.2 — 16.2: Supported
                    2. 16.3: Supported
                    3. 01% — Supported»> 16.4: Supported
                    Samsung Internet
                    1. 4 — 19.0: Supported
                    2. 20: Supported
                    Opera Mini
                    1. all: Supported
                    Opera Mobile
                    1. 10 — 12.1: Supported
                    2. 73: поддержан
                    UC Browser для Android
                    1. 13,4: Поддержан
                    Android Brower
                    1. 2,1 -4,4: 4058 10915 10915 10915 10915 10915 10915 10915 10915 10915 10915 10915 10915 10915 10915 10915 10911111111111111111101111111111111111111111111111111111111111111111111111111111111111,
                      1. .
                      QQ браузер

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

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