Для создания эффекта прозрачности в CSS используется свойство opacity .
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Название документа
.myClass {
float: left;
margin-right: 5px;
opacity: 0.4;
filter: alpha(opacity=40); /*для IE8 и более ранних версий*/
}
Попробовать »
Псевдо-класс:hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:
Название документа
img {
float: left;
margin-right: 5px;
opacity: 0.4;
filter: alpha(opacity=40); /*для IE8 и более ранних версий*/
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
Попробовать »
Есть два возможных способа сделать элемент прозрачным: свойство opacity , описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате RGB . RGB (Red, Green, Blue - красный, зеленый, синий) - цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
Color: rgb(255,255,0); color: rgb(100%,100%,0);
Цвета, заданные с помощью RGB , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB . Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).
Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
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; } Попробовать »
Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA: background: rgb(255,255,0); background: rgba(255,255,0,0.5);
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, во втором процентная запись. Пример такого блока:
