Ten post wyjaśnia metodę ustawiania przejścia za pomocą CSS „ wyświetlacz ' I ' nieprzezroczystość ' Nieruchomości.
Jak przenieść właściwości „wyświetlania” i „krycia” CSS?
Aby przejść do CSS „ wyświetlacz ' I ' nieprzezroczystość ”, najpierw utwórz kontener div z „
Krok 1: Utwórz kontener „div”.
Na początku utwórz kontener div za pomocą „
Krok 2: Ustaw właściwość „wyświetl”.
Następnie uzyskaj dostęp do kontenera div, używając nazwy klasy „ główny przedmiot ” i ustaw „ wyświetlacz ' nieruchomość:
.główny element {
wyświetlacz : blok ;
}
Tutaj wartość „ wyświetlacz ” właściwość jest ustawiona jako „ blok ” do zajmowania całej szerokości ekranu.
Krok 3: Dodaj obraz tła
Następnie zastosuj następujące właściwości CSS w kontenerze div, do którego uzyskano dostęp:
.główny element {wysokość : 400 pikseli ;
szerokość : 400 pikseli ;
zdjęcie w tle : adres URL ( wiosenne-kwiaty.jpg ) ;
nieprzezroczystość : 0,1 ;
przemiana : nieprzezroczystość 2s łatwość wsiadania ;
margines : 30px 50px ;
}
W powyższym fragmencie kodu:
- “ wysokość ' I ' szerokość ” określają rozmiar definiowanego elementu.
- “ zdjęcie w tle ” Właściwość CSS służy do wstawiania obrazu za pomocą „ URL() ” z tyłu elementu.
- “ nieprzezroczystość ” określa poziom krycia elementu. Poziom krycia pokazuje poziom przezroczystości, gdzie „ 1 ” służy do braku przezroczystości, a „ 0,5 ' jest dla ' pięćdziesiąt% ” przejrzystość.
- “ przemiana ” w CSS pozwala użytkownikom na płynną zmianę wartości właściwości w określonym czasie.
- “ margines ” określa przestrzeń poza zdefiniowaną granicą wokół elementu.
Wyjście
Krok 4: Zastosuj pseudoselektor „:hover”.
Teraz uzyskaj dostęp do kontenera div wzdłuż „ :unosić się ” pseudo selektor, który służy do wybierania elementów po najechaniu na nie myszką:
.główny element : unosić się {nieprzezroczystość : 1 ;
}
Następnie ustaw „ nieprzezroczystość ” wybranego elementu jako „ 1 ”, aby usunąć przezroczystość.
Wyjście
Wszystko sprowadza się do ustawienia właściwości „display” i „krycie” CSS przejścia.
Wniosek
Aby ustawić właściwości przejścia „display” i „opacity”, najpierw utwórz kontener div, używając elementu