opacity
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
Нет |
Нет |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Нет |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS3 |
|
1 |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/css3-color/#transparency |
Ссылка на спецификацию |
|
|
|
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>opacity</title>
<style type="text/css"> IMG.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}
</style>
</head>
<body>
<p>
<img src="igels.gif" alt="Обычный рисунок">
<img src="igels.gif" alt="Полупрозрачный рисунок" class="semi">
</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования opacity
Браузеры
Internet Explorer для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
outline
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|||
6.0 |
7.0 |
|
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
|
Нет |
|
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS2, CSS2.1 |
|
Нет |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/ui.html#propdef-outline |
Ссылка на спецификацию |
|
|
|
Описание
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четрырех сторонахэлемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину.
Синтаксис
outline: outline-color || outline-style || outline-width | inherit
Значения
outline-color |
Задает цвет линии в любом допустимом для CSS формате. |
outline-style |
Стиль линии. |
outline-width |
Толщина границы. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>outline</title>
<style type="text/css">
.photo IMG {
padding: 20px; /* Поля вокруг изображения */ margin-right: 10px; /* Отступ справа */ outline: 1px solid #666; /* Параметры рамки */ background: #f0f0f0; /* Цвет фона */
float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div class="photo">
<img src="girl.jpg" alt="Девочка с муфтой"> <img src="owl.jpg" alt="Сова">
<img src="boy.jpg" alt="Эвенкийский мальчик">
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства outline
Объектная модель
[window.]document.getElementById("elementID")style.outline