Создать прозрачные изображения с CSS легко.
Примечание: Это еще не CSS стандарт. Однако, он работает во всех современных браузерах, и является частью W3C CSS 3 рекомендаций.
Пример 1
Создание прозрачного изображения<html> <head> <meta charset="utf-8"> </head> <body> <p>Обычное изображение:</p> <img src="/images/Sumatran_Tiger.png" width="310" height="233" alt="Sumatran Tiger" /> <p>Тоже изображение с прозрачностью:</p> <img src="/images/Sumatran_Tiger.png" width="310" height="233" alt="Sumatran Tiger" style="opacity:0.4;filter:alpha(opacity=40)" /> </body> </html>
Объяснение примера
Посмотрите на следующий код:
<img src="/images/Sumatran_Tiger.png" width="310" height="233" alt="Sumatran Tiger" style="opacity:0.4;filter:alpha(opacity=40)" />
Firefox использует свойство opacity:x для прозрачности, в то время как IE использует filter:alpha(opacity=x).
Совет: Синтакс CSS3 для прозрачности - opacity:x.
В Firefox (opacity:x) x является значением в интервале 0.0 - 1.0. Меньшее значение делает элемент более прозрачным.
В IE (filter:alpha(opacity=x)) x является значением в интервале 0 - 100. Меньшее значение делает элемент более прозрачным.
Пример 2
Прозрачность изображения - Наведите курсора мыши<html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/Sumatran_Tiger.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="/images/Sumatran_Tiger2.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </body> </html>
Кроме того, в этом примере, мы добавили атрибут onmouseover и атрибут onmouseout. Атрибут onmouseover определяет, что происходит, когда указатель мыши перемещается над изображением. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда мы проводим указатель мыши над ним.
Синтакс для этого в Firefox: this.style.opacity=1 и в IE: this.filters.alpha.opacity=100.
При наведении указателя мыши от изображения, мы хотим, чтобы изображение снова стало прозрачным. Это сделано в атрибуте onmouseout.
Пример 3
Текст в прозрачной коробке<html>
<head>
<meta charset="utf-8">
<style>
div.background {
width:500px;
height:250px;
background:url(/images/Sumatran_Tiger.png) repeat;
border:2px solid black;
}
div.transbox{
width:400px;
height:180px;
margin:30px 50px;
background-color:#fff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p { margin:30px 40px; font-weight:bold; color:#000; }
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
Это просто текст, который помещен в прозрачную коробку.
Это просто текст, который помещен в прозрачную коробку.
Это просто текст, который помещен в прозрачную коробку.
</p>
</div>
</div>
</body>
</html>
Во-первых, мы создаем элемент div (class="background") с фиксированной высотой и шириной, фоновым изображением, и границей. Затем мы создаем меньший div (class="transbox") внутри первого элемента div. Этот div также имеет фиксированную высоту и ширину, фоновое изображение, и границу. Кроме того, мы сделали этот div прозрачным.
Внутри прозрачного div, мы добавили текст внутри элемента p.
Была ли эта информация полезной?
