Css прозрачность при наведении: Прозрачность при наведении | WebReference

Содержание

html — Прозрачность изображения при наведении на родительский блок

Задать вопрос

Вопрос задан

Изменён 2 года 6 месяцев назад

Просмотрен 54 раза

Имеется карточка товара на вукомерс. Вместо одной картинки, при помощи functions.php я добавляю вторую с классом dop-image. Результат: При наведении на блок — дополнительная картинка меняет opacity с 0 на 1. Отлично, все работает! Но в том случае, когда нет дополнительной картинки, и в карточке всего одна, то она при наведении исчезает. Как исправить эту проблему?

Заранее спасибо.

Код (Опустил все ненужное)

<div>
   <picture>
      <sourse data-src="">
      <img>
   </picture>
   <picture>
      <sourse data-srcset="">
      <img>
   </picture>
</div>
<style>
.
image-tovar .dop-image { opacity:0!important; position: absolute; box-sizing: border-box; left: 0; top: 0; float: left; } .image-tovar:hover .dop-image { opacity:1!important; } .image-tovar:hover img { opacity:0!important;} </style>
  • html
  • css

Приблизительно так

body{
  display: flex;
}

.image-tovar {
  position: relative;
  margin-right: 20px;
}

.image-tovar .dop-image {
  opacity: 0 !important;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  float: left;
}

.image-tovar:hover .dop-image {
  opacity: 1 !important;
}

.image-tovar:hover picture + picture img {
  opacity: 0 !important;
}
<div>
<picture>
  <img src="https://placeimg.com/100/100/animals">
  </picture>
  <picture>
  <img src="https://placeimg.
com/100/100/arch"> </picture> </div> <div> <picture> <img src="https://placeimg.com/100/100/arch"> </picture> </div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство CSS opacity: управление прозрачностью

Для управления прозрачностью элементов страницы используется свойство CSS opacity. По спецификации оно применимо к узлам любого типа и поддерживается во всех современных браузерах. С его помощью можно создать интересный дизайн или реализовать удобное интерактивное взаимодействие с пользователем.

Возможные значения

Синтаксис свойства opacity в css выглядит так:

selector {
  opacity: 1;
}

selector {
  opacity: 0;
}

selector {
  opacity: 0.4;
}

На вход принимаются числовые значения в диапазоне от 0 до 1. Параметр может представлять собой доли единицы, при этом в качестве разделителя целой и дробной части в CSS используется точка.

Элемент с нулевой прозрачностью становится невидимым, но все равно продолжает занимать свое место на странице и сохраняет возможность взаимодействовать с пользователем.

Если значение свойства отличается от нуля, то реальная прозрачность будет вычисляться как процент от некоторого верхнего предела. В обычной ситуации opacity: 1 определяет полную непрозрачность элемента.

Прозрачность дочерних узлов

Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть «менее прозрачным», чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.

parent {
 opacity: 0.7;
}

child {
 opacity: 1;
}

В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.

Примеры использования

Пример 1. Полупрозрачность. Необходимо, чтобы под элементом target был виден основной фон блока.

.target {
  background: black;
  opacity: 0.5;
}

Полупрозрачным становится не только фон блока target, но и текст.

Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.

.target {
  opacity: 0.2;
}

. target:hover {
  opacity: 1;
}

Динамическая прозрачность

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

Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.

// получение текущего значения прозрачности
var opacity = element.style.opacity;

// установка нового значения
element.style.opacity = 0.4;

Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:

element {
 opacity: 0.1;
 transition: opacity 1000ms;
}

element:hover {
 opacity: 0.8;
 transition: opacity 2000ms;
}

Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора — тускнеть до исходного значения в течение двух секунд.

Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.

Альфа-канал вместо opacity

Главные тонкости механизма opacity в CSS:

  • его действие распространяется не только на фон блока, но и на его текстовый контент, который предпочтительнее оставлять четким;
  • дочерние элементы не могут быть менее прозрачными, чем родительские.

Если эти эффекты осложняют жизнь верстальщика, вместо opacity следует использовать просто прозрачный фон, определив его значение в формате RGBA или HSLA.

Непрозрачность в CSS | Руководство по реализации непрозрачности в CSS с примерами

Вы называете функцию или свойство, и оно есть в каскадной таблице стилей. Он полон вариантов, которые продолжают расширяться по мере того, как вы исследуете больше. Много раз мы сталкиваемся с изображением, которое кажется непрозрачным или прозрачным. Иногда наведение курсора на объект также меняет его непрозрачность. Все это обрабатывается свойством CSS Opacity. Разработчик может выбрать, насколько непрозрачным должен выглядеть элемент на своей странице, используя это свойство. Эта функция в основном используется в оверлейных экранах, когда содержимое главной страницы видно так же, как и содержимое оверлейного экрана.

Синтаксис

Синтаксис для непрозрачности:

 непрозрачность:значение (процентное/десятичное) 

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

Примеры реализации непрозрачности в CSS

Давайте рассмотрим некоторые примеры, чтобы лучше понять.

Пример №1

Демонстрация непрозрачности с использованием внешнего CSS и функции наведения

В этом примере мы используем внешний CSS. Следовательно, мы начнем с создания файла CSS. В файле CSS мы напишем стиль для элемента абзаца. Чтобы продемонстрировать функцию непрозрачности, мы напишем подкласс hover, в котором будет использоваться функция непрозрачности.

Код CSS должен быть следующим:

Код:

 p{
цвет фона: сине-фиолетовый;
белый цвет;
семейство шрифтов: Cambria, Cochin, Georgia, Times, Times New Roman, с засечками;
высота: 150 пикселей;
ширина: 150 пикселей;
стиль шрифта: полужирный;
}
п: наведите {
непрозрачность: 50%;
} 
  • Теперь код HTML для этого примера будет очень простым. Во-первых, в разделе head мы вызовем внешнюю таблицу стилей.
  • Затем в разделе body мы будем использовать элемент абзаца

    , чтобы можно было продемонстрировать функцию непрозрачности. Код HTML-файла будет следующим:

  • .
 
<голова>
Демонстрация непрозрачности


<тело>
 

Демонстрация прозрачности

Если навести курсор на это поле, оно станет непрозрачным. Попробуйте.

  • Как только мы сохраним этот файл и откроем его через браузер, мы увидим следующий вывод:

  • Если навести курсор на поле, оно станет непрозрачным, например:

Пример #2

Использование непрозрачности в оверлейном экране через внешний CSS

В этом примере мы будем использовать внешний CSS. Следовательно, мы начнем с создания CSS. В файле CSS мы сначала создадим идентификатор, который будет иметь стиль для оверлейного экрана.

Тот же код будет выглядеть так:

Код:

 #ID1{
положение: фиксированное;
дисплей: нет;
высота: 50%;
ширина: 50%;
цвет фона: голубой;
непрозрачность: 50%;
курсор: указатель;
} 
  • Мы также определим класс, который будет иметь свойство стиля содержимого на оверлейном экране. Код будет выглядеть так:
 .content{
семейство шрифтов: «Segoe UI», Tahoma, Geneva, Verdana, без засечек;
цвет: темно-синий;
поле: 100 пикселей;
} 
  • Объединив идентификатор и класс, окончательный класс CSS будет выглядеть так:
 #ID1{
положение: фиксированное;
дисплей: нет;
высота: 50%;
ширина: 50%;
цвет фона: голубой;
непрозрачность: 50%;
курсор: указатель;
}
.содержание{
семейство шрифтов: «Segoe UI», Tahoma, Geneva, Verdana, без засечек;
цвет: темно-синий;
поле: 100 пикселей;
} 
  • Далее мы напишем код для HTML-страницы. Поскольку в этом примере используется внешний CSS, мы будем вызывать внешний файл CSS в разделе head.
  • Теперь, поскольку нам нужен оверлейный экран, мы определим некоторые функции JavaScript. Это будет закодировано в разделе body внутри тега script. Код для того же будет выглядеть так:
 <скрипт>
функция вверх () {
document.getElementById("ID1").style.display = "блок";
}
функция вниз () {
document.getElementById("ID1").style.display = "нет";
}
  • Теперь, используя эти функции и сценарий CSS, мы напишем код для элемента
    в разделе body следующим образом:
 <дел>
ТЕКСТ НАД ЭКРАНОМ

НАЖМИТЕ, ЧТОБЫ ПРОСМОТРЕТЬ ЭФФЕКТ НЕПРОЗРАЧНОСТИ НА ЭКРАНЕ НАЛОЖЕНИЯ

  • Следовательно, окончательный код HTML должен выглядеть так:
 
<голова>
Демонстрация оверлея


<тело>
<скрипт>
функция вверх () {
document.getElementById("ID1").style.display = "блок";
}
функция вниз () {
document.getElementById("ID1").style.display = "нет";
}

<дел>
ТЕКСТ НАД ЭКРАНОМ

НАЖМИТЕ, ЧТОБЫ ПРОСМОТРЕТЬ ЭФФЕКТ НЕПРОЗРАЧНОСТИ НА ЭКРАНЕ НАЛОЖЕНИЯ

  • Сохранение этого файла и открытие его в браузере даст следующий результат:

  • При нажатии на кнопку всплывает оверлейный экран и выдается следующий вывод:

Если щелкнуть в любом месте наложенного экрана, он исчезнет.

Пример #3

Непрозрачность с использованием внутреннего CSS

Поскольку мы используем внутренний CSS, мы будем напрямую кодировать HTML-страницу. В разделе head мы определим стиль с помощью тега

  • Теперь в разделе body мы вызовем элемент абзаца

    , чтобы можно было продемонстрировать функцию непрозрачности.

  • Окончательный HTML-код должен выглядеть так:
 
<голова>
Демонстрация непрозрачности
<стиль>
п{
цвет фона: зеленый;
белый цвет;
семейство шрифтов: Cambria, Cochin, Georgia, Times, Times New Roman, с засечками;
высота: 150 пикселей;
ширина: 150 пикселей;
стиль шрифта: полужирный;
}
п: наведите {
непрозрачность: 50%;
}


<тело>
 

Демонстрация непрозрачности

Если навести курсор на это поле, оно станет непрозрачным!

  • Вывод html-страницы при открытии через браузер будет выглядеть следующим образом:

  • Наведение курсора на зеленое поле сделает его непрозрачным, как показано на скриншоте ниже:

Объяснение: В приведенном выше примере мы видели различные способы и цели использования свойства непрозрачности. Тем не менее, это не ограничивается только вышеперечисленными вариантами. Можно попробовать поэкспериментировать с изображениями и установить желаемую непрозрачность. Это функция, которую можно использовать в зависимости от требований пользователя. Эффективное использование таких функций улучшит работу конечного пользователя. Разработчики могут свободно проверять и экспериментировать с различными функциями CSS в различных комбинациях, чтобы получить соответствующие результаты.

Рекомендуемые статьи

Это руководство по непрозрачности в CSS. Здесь мы обсудим введение в непрозрачность в CSS с синтаксисом и примеры, чтобы лучше понять использование непрозрачности. Вы также можете ознакомиться с другими нашими статьями по теме, чтобы узнать больше —

  1. CSS Gradient Generator
  2. Таблица цветов CSS
  3. Валидатор CSS
  4. Модель коробки CSS

Свойство непрозрачности CSS — как получить процент непрозрачности

Свойство непрозрачности CSS

Свойство непрозрачности CSS используется для описания непрозрачности/прозрачности элемента. Непрозрачность также определяется для четкости изображения с помощью CSS Opacity.

Свойство Непрозрачность используется для описания прозрачности изображения. Низкое значение представляет высокую прозрачность, а высокое значение представляет низкую прозрачность, где свойство может принимать значение от 0,0 до 1,0 .

Непрозрачность в процентах рассчитывается как:

Непрозрачность% = Непрозрачность * 100. Возьмем пример непрозрачности:

 

    <голова>
        Свойство прозрачности
        <стиль>
        .цветок {
            непрозрачность: 0,5;
        }
        h3 {
            нижняя граница: 5px;
        }
        .непрозрачность {
            выравнивание текста: по центру;
        }
        
    
    <тело>
        

исходное изображение со 100% непрозрачностью



исходное изображение с непрозрачностью 50%

Выход:

Исходное изображение со 100% непрозрачностью

Исходное изображение с непрозрачностью 50 %

Эффект прозрачного наведения

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

Давайте рассмотрим пример эффекта прозрачного наведения:

 

<голова>
<стиль>
картинка {
  непрозрачность: 0,5;
}
изображение: наведите {
  непрозрачность: 1,0;
}


<тело>
 

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

Свойство opacity используется с селектором :hover

цветок девушка .\CSS opacity\opacity3.jpg" alt="гора">

Выход:

Свойство opacity используется с селектором :hover

Свойство opacity используется с селектором :hover

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

 

<голова>
<стиль>
.img2: наведение {непрозрачность: 0,5;}


<тело>
 

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

Свойство opacity используется с селектором :hover

цветок девушка гора

Выход:

Свойство opacity используется с селектором :hover

Свойство opacity используется с селектором :hover

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

Когда вам нужен прозрачный блок с помощью свойства непрозрачности, вы должны добавить прозрачность элемента , все его дочерние свойства наследуют ту же прозрачность родительского свойства.