Войти
s-lub » Учебники » CSS 3 » Создание прозрачных элементов и картинок

Создание прозрачных элементов и картинок

Создание прозрачных элементов и картинок

Для создания прозрачных элементов в CSS 3 необходимо использовать свойство opacity, значение выставляется от 0 до 1, где 0 полностью прозрачный элементе, а 1 полностью не прозрачный.

Пример:

<html>
<head>
<style type='text/css'>
.op1
{
position:absolute;
top:231px;
background-color:black;
width:401px;
height:62px;
opacity:0.7;
}
.op2
{
position:absolute;
top:243px;
left:19px;
width:700px;
color:white;
}
</style>
</head>
<body>
<img style='border:solid black 1px;' src='fon.jpg' alt='Фон'/>
<p class='op1'> </p>
<p class='op2'>Этому порагарфу мы придали прозрачность равную 0,7.</p>
</body>
</html>

На этом примере мы придадим картинкам разные уровни прозрачности:

<html>
<head>
<style type='text/css'>
.op1
{
opacity:0.8;
}
.op2
{
opacity:0.2;
}
.op3
{
opacity:0.5;
}
</style>
</head>
<body>
<img class='op1' src='html.jpg' />
<img class='op2' src='html.jpg' />
<img class='op3' src='html.jpg' />
</body>
</html>