прозрачность
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.
Блок с градиентом
Сделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.
Как сделать слой полупрозрачным?
Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter , свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.
Полупрозрачный фон
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.
Как установить изображение полупрозрачным?
За управление прозрачностью элемента на странице отвечает стилевое свойство opacity , которое относится к CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.
Как установить таблицу полупрозрачной, а часть ячеек нет?
Для изменения прозрачности элемента в CSS3 предусмотрено свойство opacity , его значение может меняться от 0 до 1. Ноль соответствует полной прозрачности элемента, а единица, наоборот, непрозрачности. Современные браузеры вполне корректно работают с этим свойством за исключением браузера Internet Explorer, поэтому для него приходится использовать специальное свойство filter со значением alpha(Opacity=X) , где X может меняться от 0 до 100.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные материалы
- Самоучитель HTML4
- Самоучитель CSS
- Как добавить картинку на веб-страницу?
- Спецсимволы
- Структура HTML-кода
- Введение в HTML
- Способы добавления стилей на страницу
- Выравнивание текста
- Якоря
- Позиционирование элементов
- Как добавить иконку сайта в адресную строку браузера?
- Ссылки
Прозрачность opacity
Свойство opacity определяет уровень прозрачности элемента.
Прозрачность изображения
Свойство opacity принимает значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее элемент:
opacity 1
(по умолчанию)
Изменение прозрачности при наведении мыши
Очень часто свойство opacity используется вместе с селектором :hover , чтобы изменять прозрачность элемента при наведении на него мыши:
img < opacity: 0.5; >img:hover
Объяснение примера
Первая CSS декларация аналогична той, что мы приводили в первом примере. Дополнительно к этому, мы добавили то, что должно происходить, когда пользователь наводит на одно из изображений. В данном случае при наведении пользователем мыши, отменяется прозрачность изображения. CSS код для этого — opacity: 1; .
Когда указатель мыши уводится с изображения, оно опять становится прозрачным.
Ниже пример с обратным эффектом:
img:hover
Прозрачный блок
Если к фону элемента добавлять прозрачность при помощи свойства opacity , то все дочерние элементы будут наследовать эту прозрачность. Это может привести к тому, что текст внутри полностью прозрачного элемента будет трудно читать:
CSS прозрачность
Сделать элемент HTML (например выпадающее меню) полупрозрачным.
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
Решение
В стилях для нужного элемента задаем:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
Теория
W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).
К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); — для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант — filter: alpha(opacity=50);
- -moz-opacity — для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
- -khtml-opacity — для Safari 1.1 и Konqueror 3.1
Минусы
filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.
Возможные проблемы
Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ zoom: 1; /* для элемента в ИЕ, у которого не заданы width и height */
update by Егор Скорняков может так же не работать, если применить к блоку с очень большими размерами (например, 9999x9999px).
Делаем полупрозрачный фон
При добавлении эффекта прозрачности элементу, все вложенные элементы тоже становятся прозрачными. Из-за этого могут возникнуть некоторые трудности, например, текст становится трудночитаемым. Для решения этой проблемы применяется метод с использование прозрачного фона. В качестве примера будем использовать выпадающее меню. HTML код:
.cssOpacityDiv2 < display: none; position: absolute; left: 0; top: 24px; width: 208px; overflow: hidden; /* обрезаем лишний фон */ >.cssOpacityDiv2 div < background: #990000; /* цвет фона меню */ opacity: 0.5; /* степень прозрачности */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* степень прозрачности для ие */ width: 100%; /* ширина раная ширине родительского блока */ height: 1000px; /* высоту задаем большую, т.к. не знаем заранее сколько пунктов меню будет */ position: absolute; z-index: 1; /* указываем явно уровень по z-оси, чтобы сделать меню выше */ top: 0; left: 0; >.cssOpacityUl < list-style: none; width: 208px; margin: 0; padding: 0; text-align: center; position: relative; /* для того чтобы указать уровень по z-оси */ z-index: 2; /* задаем уровень больше, чем о полупрозрачного фона */ >
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
Наведи на меня курсор
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
По теме
- Выпадающее меню на CSS
- Полупрозрачное затемнение фона
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения
Полупрозрачный фон
Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.
Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.
Допустим, это ваш сайт (html):
Полупрозрачный фон Ваш текст
Ваш текст. Ваш текст.Строчка «» подключает файл стилей CSS.
Вот он (он называется style.css):
body < background: "Ваша картинка для фона" ; * background-attachment: fixed ; background-position: top center; >.mid
В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.
Вот так всё просто. Пробуйте, у вас обязательно всё получится!
* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.