Создание прозрачных изображений с помощью CSS легко.
CSS opacity свойство является частью рекомендации CSS3.
Пример 1 - Создание прозрачного изображения
Свойство CSS3 для обеспечения прозрачности является opacity .
Во-первых, мы покажем вам, как создать прозрачное изображение с помощью CSS.
Регулярное изображение:
То же самое изображение с прозрачностью:
Посмотрите на следующий CSS:
opacity свойство может принимать значение от 0,0 - 1,0. Чем ниже значение, тем более прозрачным.
IE8 и более ранних версий используйте filter:alpha(opacity=x) . Х может принимать значение от 0 - 100. Меньшие значения делают элемент более прозрачной.
Пример 2 - Прозрачность изображения - эффект при наведении
Наведите курсор мыши на изображение:
CSS выглядит следующим образом:
пример
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Попробуй сам " Первый блок CSS подобен коду в примере 1. Кроме того, мы добавили, что должно произойти, когда пользователь парит над одним из изображений. В этом случае мы хотим, чтобы изображение не может быть прозрачным, когда пользователь наводит указатель мыши над ним. CSS для этого является opacity:1; .
Когда указатель мыши перемещается от образа, изображение будет прозрачным снова.
Пример 3 - Текст в прозрачной коробке
Это текст, который помещен в прозрачный ящик.
Исходный код выглядит следующим образом:
пример
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Попробуй сам " Во- первых, мы создаем <div> элемент (class="background") с фоновым изображением, а также границу. Затем мы создаем другой <div> (class="transbox") внутри первого <div> . <div class="transbox"> имеют цвет фона и границы - DIV является прозрачным. Внутри прозрачной <div> , мы добавим текст внутри <p> элемента.