В этом посте объясняется метод настройки перехода с помощью CSS». отображать ' и ' непрозрачность ' Характеристики.
Как изменить свойства CSS «отображение» и «непрозрачность»?
Для перехода CSS « отображать ' и ' непрозрачность ', во-первых, создайте контейнер div с параметром ' <дел> элемент. Затем откройте контейнер div и добавьте фоновое изображение с помощью кнопки « изображение на заднем плане ' свойство. После этого установите « переход », « непрозрачность ”, и другие необходимые свойства по вашему выбору.
Шаг 1: Создайте контейнер «div»
Изначально создайте div-контейнер с помощью команды « <дел> » и добавьте атрибут класса с определенным именем. Для этого мы установили имя класса как « элемент ”:
<класс деления '=' 'главный предмет' > >
Шаг 2: Установите свойство «отображать»
Затем получите доступ к контейнеру div, используя имя класса « главный предмет ' и установите ' отображать ' свойство:
.основной элемент {
отображать : блокировать ;
}
Здесь значение « отображать ” установлено как “ блокировать ” для того, чтобы занять всю ширину экрана.
Шаг 3: Добавьте фоновое изображение
Затем примените следующие свойства CSS к доступному контейнеру div:
.основной элемент {высота : 400 пикселей ;
ширина : 400 пикселей ;
изображение на заднем плане : URL ( весна-цветы.jpg ) ;
непрозрачность : 0,1 ;
переход : непрозрачность 2 с легкость входа ;
допуск : 30 пикселей 50 пикселей ;
}
В приведенном выше фрагменте кода:
- “ высота ' и ' ширина » определяют размер определяемого элемента.
- “ изображение на заднем плане Свойство CSS используется для вставки изображения с помощью « URL() ” на задней стороне элемента.
- “ непрозрачность ” определяет уровень непрозрачности элемента. Уровень непрозрачности демонстрирует уровень прозрачности, где « 1 ” используется для отсутствия прозрачности, и “ 0,5 ' для ' пятьдесят% «прозрачность.
- “ переход ” в CSS позволяет пользователям плавно изменять значения свойств в течение заданного времени.
- “ допуск ” определяет пространство за пределами определенной границы вокруг элемента.
Выход
Шаг 4. Примените псевдоселектор «:hover»
Теперь получите доступ к контейнеру div по пути « :наведите » псевдоселектор, который используется для выбора элементов при наведении на них указателя мыши:
.основной элемент : парить {непрозрачность : 1 ;
}
Затем установите « непрозрачность » выбранного элемента как « 1 », чтобы убрать прозрачность.
Выход
Это все, что нужно для настройки CSS-свойств перехода «отображение» и «непрозрачность».
Заключение
Чтобы установить свойства перехода «отображение» и «непрозрачность», сначала создайте контейнер div с помощью элемента