Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS Прозрачность изображения



Свойство opacity определяет непрозрачность/прозрачность элемента.


CSS opacity

CSS свойство opacity может принимать значение от 0.0 - 1.0. Чем меньше значение, тем прозрачнее:

Лес

opacity 0.2

Лес

opacity 0.5

Лес

opacity 1
(по умолчаню)

Примечание: IE8 и более раннее использование filter:alpha(opacity=x). x может принимать значение от 0 до 100. Чем значение меньше, тем элемент более прозрачный.

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
}
Попробуйте сами »

Прозрачный эффект при наведении

CSS свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении мыши:

Северное сияние
Горы
Фьорды
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* Для IE8 и более ранних версий */
}
Попробуйте сами »

Объяснение примера

Первый блок CSS похож на код в примере 1. Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение не было прозрачным, когда пользователь наводить на него курсор. Для этого примера CSS свойство opacity:1;.

Когда указатель мыши отходит от изображения, изображение снова становится прозрачным.

Пример обратного эффекта наведения:

Северное сияние
Горы
Фьорды
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
}
Попробуйте сами »


Прозрачный бокс

При использовании CSS свойства opacity для добавления прозрачности фона элемента, всех его дочерних элементов наследуют одинаковую прозрачность. Это может затруднить чтение текста внутри прозрачного элемента:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

div {
    opacity: 0.3;
    filter: alpha(opacity=30); /* Для IE8 и более ранних версий */
}
Попробуйте сами »

Прозрачность с помощью RGBA

Если Вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значение цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, а не для текста:

100% opacity

60% opacity

30% opacity

10% opacity

Вы уже узнали от нашего раздела CSS Цвета, что можно использовать RGB в качестве значения цвета. Вкачестве дополнения к RGB, можно использовать значение цвета RGB с альфа-каналом (RGBA) - который задает прозрачность цвета.

Значение цвета RGBA определяется с помощью: rgba(red, green, blue, alpha). Параметр alpha является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGB в нашем разделе CSS3 Цвета.

div {
    background: rgba(76, 175, 80, 0.3) /* Зеленый фон с 30% прозрачности */
}
Попробуйте сами »

Текст в прозрачном поле

Это некоторый текст, который помещается в прозрачное поле.

<html>
<head>
<style>
div.background {
    background: url(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); /* Для IE8 и более ранних версий */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Это некоторый текст, который помещается в прозрачное поле.</p>
  </div>
</div>

</body>
</html>
Попробуйте сами »

Во-первых, сначало мы создаем элемент <div> с class="background" с фоновым изображением и границей. Затем мы создаем другой <div> (class="transbox") внутри первого <div>. У class="transbox" есть цвет фона и граница <div> - является прозрачным. Внутри прозрачного <div>, мы добавляем некоторый текст внутри элемента <p>.


Практика: прозрачность

Упражнение: прозрачность img

Используйте CSS, чтобы установить прозрачность изображения на 50%.

<style>
img {
  : ;
}
</style>

<body>
  <img src="klematis.jpg" width="150" height="113">
</body>



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.