Лучшее руководство по CSS изображение прозрачным / непрозрачным в 2024 году. В этом руководстве вы можете изучить Другие примеры,Пример 1 - Создание прозрачное изображение,Пример 2 - Прозрачность изображения - эффект при наведении,Пример 3 - прозрачный текстовое поле,
CSS изображение прозрачным / непрозрачным
С помощью CSS можно легко создать прозрачное изображение.
Примечание: CSS Непрозрачность свойство является частью рекомендаций W3C CSS3.
Другие примеры
Создание прозрачное изображение - парить эффект
Создать текстовое поле имеет прозрачное фоновое изображение
Пример 1 - Создание прозрачное изображение
Прозрачность в CSS3 свойства являетсянепрозрачности.
Во-первых, мы покажем вам, как создать прозрачное изображение с помощью CSS.
Нормальное изображение
То же самое изображение с прозрачностью:
Рассмотрим следующий CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, Safari и браузер использует свойства прозрачности изображения могут стать непрозрачными. Непрозрачность значение свойства от 0.0 - 1.0. Меньшие значения делают элемент более прозрачной.
IE8 и более ранние версии используют фильтр: альфа (непрозрачность = х). X может принимать значения от 0 - 100. Более низкие значения делают элемент более прозрачной.
Пример 2 - Прозрачность изображения - эффект при наведении
Наведите курсор на изображение:
стиль CSS:
{
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: Непрозрачность = 1.
IE8 и более раннееприменение: фильтр: альфа (Непрозрачность = 100 ).
Когда указатель мыши от изображения, изображение будет повторно прозрачность.
Пример 3 - прозрачный текстовое поле
Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке. Текст в прозрачной коробке.
Исходный код выглядит следующим образом:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
Во-первых, мы создаем фиксированную высоту и ширину элемента сНу с фоновым изображением и границы. Затем мы создаем более мелкие элементы DIV внутри первого дел. Это Div также имеют фиксированную ширину, цвет фона, границы - и она прозрачна. Внутри прозрачного DIV, мы добавим некоторый текст внутри элемента P.
