Как сделать слой полупрозрачным? - «Вёрстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 15 ноябрь 2024, 00:01
Грядёт Wi-Fi 8: когда он появится и что предложит вместо повышения скорости - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
16-03-2016, 16:00
Как сделать слой полупрозрачным? - «Вёрстка»
Рейтинг:
Категория: Самоучитель CSS / Вёрстка
Internet Explorer Chrome Opera Safari Firefox Android iOS
5.5+ 1.0+ 9.0+ 3.1+ 3.6+ 1.0+ 2.0+

Задача

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

Решение

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

Пример 1. Полупрозрачный слой

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Полупрозрачный слой</title>
  <style>
   body {
    background: url(images/star.png); /* Фоновый рисунок  */
   }
   .semilayer {
    padding: 5px; /* Поля вокруг текста */
    background: #2bc671; /* Цвет фона */
    margin: 0 auto; /* Выравниваем слой по центру */
    width: 80%; /* Ширина слоя */
    opacity: 0.7; /* Значение прозрачности */
    filter: alpha(Opacity=70); /* Прозрачность в IE */
   }
  </style>
 </head>
 <body>
  <div class="semilayer">
   Очевидно проверяется, что интерполяция небезынтересно искажает интеграл Дирихле,
   таким образом сбылась мечта идиота&nbsp;&#8212; утверждение полностью доказано.
  </div>
 </body>
</html>

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

 


Рис. 1. Полупрозрачный слой в браузере Safari

Свойство filter добавляет прозрачность только для тех элементов, где установлен хотя бы один из размеров (width или height) или для элемента задано абсолютное позиционирование (position: absolute).

Также учтите, что прозрачность действует на всё содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. В примере 1, где прозрачность слоя установлена как 0.7, текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.


Internet Explorer Chrome Opera Safari Firefox Android iOS 5.5 1.0 9.0 3.1 3.6 1.0 2.0 Задача Сделать блочный элемент со всем его содержимым полупрозрачным. Решение Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter, свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров. Пример 1. Полупрозрачный слой HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Рис. 1. Полупрозрачный слой в браузере Safari Свойство filter добавляет прозрачность только для тех элементов, где установлен хотя бы один из размеров (width или height) или для элемента задано абсолютное позиционирование (position: absolute). Также учтите, что прозрачность действует на всё содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. В примере 1, где прозрачность слоя установлена как 0.7, текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.
Просмотров: 3 143
Комментариев: 0:   16-03-2016, 16:00
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР