Используем прозрачность – opasity для элементов страницы.


CSS дает нам множество возможностей и инструментов для изменения свойств отдельных элементов на странице. Одно из них – opasity, которое позволяет изменять прозрачность, например, тех же изображений, не прибегая к «услугам» графических редакторов.

Используем прозрачность – opasity для элементов страницы

Синтаксис данного атрибута такой:
opacity: значение;

Значение – число в диапозоне от 0 до 1, которое определяет степень прозрачности (0 – полностью прозрачный элемент, 1 – непрозрачный). Играясь с цифрами вы можете получить нужную степень видимости объекта и «проявления» расположенного под ним фона или другого изображения. Также можно указывать значение, опуская 0 перед точкой, например, .4 или .7, что равносильно значениям 0.4 и 0.7.

Opacity поддерживают все браузеры, кроме IE. Для получения такого же эффекта в Internet Explorer мы можем использовать фильтр:

filter: alpha(opacity=значение), где значение – это число от 0 до 100.

исходное изображение

Этот пример можно получить с помощью следующего кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<style>
.mazda1 {
        opacity: 1;
        filter: alpha(opacity=100);
}
.mazda2 {
        opacity:.5;
        filter: alpha(opacity=50);
}
.mazda3 {
        opacity:.1;
        filter: alpha(opacity=10);
}
</style>
</head>
<body>
<img src="mazda.jpg"class="mazda1">
<img src="mazda.jpg"class="mazda2">
<img src="mazda.jpg"class="mazda3">
</body>
</html>




Случайные посты

Категория: Используем CSS

Оставить комментарий