Как сделать блок прозрачным в css

Как сделать элемент прозрачным и убрать прозрачность CSS?

Для того, чтобы сделать элемент прозрачным, следует использовать CSS. Для стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 — элемент не прозрачен, а 0.1 или 10 — это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.

Полупрозрачный элемент

Соответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.

Код CSS

Как убрать прозрачность дочернего элемента?

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

Код CSS

Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс

Правильная прозрачность

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.

Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.

Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.

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

Вот так выглядит наш блок:

< h1 > Привет, я прозрачный блок </ h1 >

Текст внутри блока. Текст внутри блока. Текст внутри блока.

Теперь добавим прозрачную подложку:

< div class =«transparency» >
<!— Это прозрачный блок—>
</ div >

< div class =«content» >
< h1 > Привет, я прозрачный блок </ h1 >
Текст внутри блока. Текст внутри блока. Текст внутри блока.
</ div >
</ div >

Теперь перейдем к оформлению css:

#container <
padding:20px;
width:300px;
color:#FFFFFF;
position:relative;
float:left;
margin-left:20px;
overflow:hidden;
>

#container .transparency <
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:340px;
height:1500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
>

Готово! Теперь все элементы внутри блока не изменят свою прозрачность. Для полного счастья, я решил написать небольшой скрипт на jQuery, который всё автоматизирует.

CSS прозрачность и особенности применения

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

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

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

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

В браузере будет примерно такая картинка:

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

Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.

Свойство 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. В некоторых версиях может не пройти прозрачность, если не указаны ширина и высота контейнера. Но паниковать еще рано, так как этот баг легко можно исправить с помощью такой записи:

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

На заметку

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

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

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

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

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

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

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

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

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