Элемент прозрачный. Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA). Прозрачность и зазубренный текст в IE
CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes
В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.
Как задать прозрачность любого элементаВ CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.
Пример использования:
Прозрачность .im { filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.
Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.
Такой хороший:) браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х - это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 - это полная прозрачность, а 100 - полная непрозрачность.
Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.
Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.
Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:
filter: alpha(Opacity=50); /* Прозрачность для IE */ -moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */ -khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */ opacity: 0.5; /* Поддержка всех остальных браузеров */
Прозрачность различных элементовРассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.
CSS прозрачность картинки.
Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.
Прозрачность .im1 { filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } .im2 { filter: alpha(Opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }
Результат:
Прозрачность на CSS при наведении курсора на картинку.
Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный - это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.
Прозрачность .im1 { filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .im1:hover { filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } .im2 { filter: alpha(Opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } .im2:hover { filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
Результат можете посмотреть в демо.
Прозрачность фона на CSS.
Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.
В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.
Пример кода:
Прозрачность BODY { background: url(bg.png); /* Изображение в качестве фона */ } .blok { background: #FC0; /* Цвет фона */ padding: 5px; /* Внутренний отступ */ color: #000000; /* Цвет текста */ filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } Текст
Вот результа размещенного выше кода:
Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.
В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.
Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.
Старый подходВ старых версиях Firefox и Safari необходимо применять свойство следующим образом:
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.
В следующей строке используется свойство -moz-opacity , которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.
CSS прозрачность в Firefox, Safari, Chrome и OperaДля большинства современных браузеров достаточно использовать следующее свойство:
#myElement { opacity: .7; }
В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.
Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02", хоть это и мало заметно.
CSS прозрачность для Internet ExplorerКак обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.
#myElement { filter: alpha(opacity=40); }
В этом примере используется свойство filter , которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true . Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре .
Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* работает в IE6, IE7 и IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* только для IE8 */ }
Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во второй строке используется префикс -ms- , а значение взято в кавычки.
Установка и изменение CSS прозрачности с помощью JavaScript или jQueryВы можете использовать следующий код для установки прозрачности:
Document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE
Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:
$("#myElement").css({ opacity: .4 }); // работает во всех браузерах
Вы можете анимировать это свойство:
$("#myElement").animate({ opacity: .4 }, 1000, function() { // Анимация завершена; этот код работает во всех браузерах. });
Функция RGBAВ CSS3 планируется поддержка альфа-канала с помощью функции rgba . Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:
#rgba { background: rgba(98, 135, 167, .4); }
В этом случае последний параметр указывает на уровень непрозрачности.
Функция HSLAПодобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA , параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).
#hsla { background: hsla(207, 38%, 47%, .4); }
Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity - наследуется.
Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.
Синтаксис CSS opacity
Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).
Пример №1. Прозрачное изображение в htmlПервая картинка выведена без прозрачности, вторая с прозрачностью 0.5
.primer1{ padding: 5px; opacity: 0..jpg»>
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
.primer2{ padding: 5px; opacity: 0.5; } ..jpg»>
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в htmlНиже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
.primer3{ padding: 5px; opacity: 1; } .block3{ width: 100px; height: 100px; background: #1E90FF; margin: 0px 0px -60px 80px; border: 1pxsolid #000; opacity: 0..jpg»>
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity=»VALUE»
Читайте также:
. text-shadow
. Свойство zoom
. Отступы padding
. Отступы margin
. Как сделать рамку элементов border
. Как сделать фон на сайте html
. Как сделать анимацию в html
. Как сделать линейный градиент
. Радиальный градиент CSS
← Перейти в каталог CSS уроков
CSS прозрачность (Opacity vs RGBA)
На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA .
Прозрачность.Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.
CSS прозрачность OpacityЦифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот — абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.
На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон.
CSS прозрачность в формате RGBAФормат для записи цвета RGBA , является более современной альтернативой для свойства opacity . R (red), G (green), B(blue) – значит: красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.
Теперь давайте рассмотрим наш пример с использованием RGBA . Заменим эти строчки в стилях.
на следующую одну строку
Как вы видите значение прозрачности 0.3 совпадает у обоих методов.
Результат примера с RGBA:Второй скриншот намного лучше смотрится, чем первый.
Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов. Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен. Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3 , реализовывался он чисто в графических программах.
Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer , тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.
ВыводФормат RGBA поддерживают все современные браузеры, за исключением Internet Explorer . Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS .
Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти мой видео-курс.
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Прозрачность opacity или rgba | CSS Прозрачность в CSS
Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.
Opacity — Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).
К примеру нам надо, чтобы наша картинка была на половину прозрачной
Добавляем стили
Но к сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:
Так же на IE может не работать если не указаны width (ширина) или height (высота).
Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.
Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.
Синтаксис
Допустим, нам нужен текст с прозрачным фоном.
Отличия opacity от rgba
opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.
rgba влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.
CSS: Прозрачность Прозрачность картинкиДля создания эффекта прозрачности в CSS используется свойство opacity.
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — , где «» может принимать значение от до, чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство, которое может принимать в качестве значения числа от до, чем меньше значение, тем прозрачнее будет элемент:
Название документа .myClass { float: left; margin-right: 5px; opacity: 0..jpg» class=»myClass»> Попробовать »
Псевдо-класс:hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:
Название документа img { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } img:hover { opacity: 1..jpg»> Попробовать »
Есть два возможных способа сделать элемент прозрачным: свойство, описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате.
Свойство CSS opacity(Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
color: rgb(255,255,0); color: rgb(100%,100%,0);
Цвета, заданные с помощью, будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета схоже по синтаксису со стандартными правилами. Однако, кроме всего прочего, нам потребуется объявить значение как (вместо) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).
color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
body { background-image: url(img.jpg); } .prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; } .prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; } Попробовать »
Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения: background: rgb(255,255,0); background: rgba(255,255,0,0.5);
Статьи / CSS /
Как сделать элемент прозрачным и убрать прозрачность CSS?1. Как сделать элемент прозрачным?
2. Как убрать прозрачность дочернего элемента?
3. Пример
Для того, чтобы сделать элемент прозрачным, следует использовать CSS.
CSS прозрачность – просто о важномДля стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 — элемент не прозрачен, а 0.1 или 10 — это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.
Полупрозрачный элементСоответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.
Код CSS
Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность) , то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:
Код CSS
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity: 1;
Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.
Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс
Opacity:hover {
filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}
Создаём файл index.html
Название странички
.opacity:hover {
filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}
Square {
width: 100px;
height: 100px;
background: black;
}
Полупрозрачность элемента
Делаем изображение полупрозрачным при наведении!
ДемонстрацияСкачать исходники
Спасибо за внимание!
Следующая статья
Как создать div блок с прокруткой?
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for "lorem ipsum" will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Итак, сегодня речь пойдет о прозрачности в html страницах. Вы наверняка сталкивались с прозрачными всплывающими блоками, будь то фотогалерея или формы авторизации на каком-либо популярном сайте. Применений прозрачности в html можно найти множество. Так как она делается и где ее можно использовать?
Ну для начала уясним что документ у нас имеет не только одну плоскость монитора - он вообще говоря 3х мерный, об этом я упоминал в статье "Z-index ". Соответственно даже совершенно прозрачный слой, окажись он на верху стека отображения, перекроет доступ к остальным элементам. В этом одно из главных применений прозрачных блоков. Несомтря на то, что обычно используется эффект затенения, полностью прозрачный слой будет работать точно так же. Так, например, работает очень много популярных фото-галерей, организуется затененный слой в котором отбражаются фото, и элементы управления ими. Все остальное пространство страницы оказывается "накрыто" (полу)прозрачным слоем, закрывающим доступ ко всем другим элементам на странице. Т.е. уйти со страницы, нажав на ней какую-либо ссылку не получится - весь текст закрыт подложкой. Чтобы вернуться к телу сайта обычно предусматривают элементы управления для закрытия галереи, формы входа и т.п. Управляют показом/скрытием прозрачных блоков с помощью javascript. Здесь к сожалению альтернативы ему нет. Без его использования пользователь либо вообще не увидит прозрачного блока, либо не сможет его закрыть, не уйдя с текущей страницы. Отмечу, что используются для этого свойства visibility или display.
Так как, собственно организуется прозрачность в html? Настройка прозрачности элементов вообще говоря не входит в спецификацию CSS, потому приходится использовать сразу несколько инструкций для ее создания. Одни браузеры (ie) будут работать с одним вариантом, вторые с другим. Ie использует встроенную функциональность filter, другие браузеры используют свойство "opacity", которое задается в интервале от 0(полностью прозрачный объект) до 1(полная непрозрачность). Для примера в случае с 30% прозрачностью следует писать "opacity:0.30; filter:alpha(opacity=30); ". Свойства как видно из примера схожи - только в первом случае используется число от 0 до 1, во втором процентная запись. Пример такого блока: