CSS 'görüntü' + 'opaklık' Özelliklerinin Geçişi Nasıl Yapılır?

Css Goruntu Opaklik Ozelliklerinin Gecisi Nasil Yapilir



CSS'de geçiş, üzerine CSS özelliklerini uygularken eklenen öğenin hızını kontrol etmek için kullanılan bir yöntemi ifade eder. Daha spesifik olarak, sayfa geçişleri, görüntü geçişleri, metin ve çok daha fazlası dahil olmak üzere çeşitli geçişler gerçekleştirebilirsiniz. Özellik değişikliklerinin hemen yürürlüğe girmesi yerine, belirli bir süre sonra uygulanacak değişiklikleri belirleyebilirsiniz.

Bu gönderi, CSS'nin yardımıyla geçişi ayarlama yöntemini açıklıyor ' görüntülemek ' Ve ' opaklık ' Özellikler.

CSS “görüntüleme” ve “opaklık” Özellikleri Nasıl Geçiş Yapılır?

CSS'ye geçiş yapmak için ' görüntülemek ' Ve ' opaklık ' özellikleri, önce ' ile bir div kapsayıcısı yapın

” öğesi. Ardından, div kabına erişin ve “ yardımıyla bir arka plan resmi ekleyin. arka plan görüntüsü ' mülk. Bundan sonra, “ geçiş ”, “ opaklık ” ve seçiminize göre gerekli diğer özellikler.





1. Adım: Bir 'div' Kapsayıcı oluşturun

Başlangıçta, “ yardımıyla bir div kapsayıcısı yapın.

” kapsayıcısını kullanın ve belirli bir ada sahip bir sınıf niteliği ekleyin. Bunun için sınıfın adını “” olarak belirledik. öğe ”:



= 'ana öğe' > >

2. Adım: 'Ekran' Özelliğini Ayarlayın

Ardından, “ sınıf adını kullanarak div kabına erişin. ana öğe ” ve “ görüntülemek ' mülk:



.ana öğe {

görüntülemek : engellemek ;

}

Buradaki “” değeri görüntülemek ” özellik “ olarak ayarlandı engellemek ” tüm ekran genişliğini almak için.



3. Adım: Arka Plan Resmi Ekleyin

Ardından, erişilen div kabına aşağıdaki CSS özelliklerini uygulayın:

.ana öğe {

yükseklik : 400 piksel ;

Genişlik : 400 piksel ;

arka plan görüntüsü : url ( bahar-çiçekleri.jpg ) ;

opaklık : 0.1 ;

geçiş : opaklık 2 saniye kolay giriş ;

marj : 30 piksel 50 piksel ;

}

Yukarıda belirtilen kod parçacığında:



  • “ yükseklik ' Ve ' Genişlik ” özellikleri, tanımlanan öğenin boyutunu belirler.
  • “ arka plan görüntüsü CSS özelliği, “ yardımıyla bir resim eklemek için kullanılır. url() ” öğesinin arka tarafında işlev görür.
  • “ opaklık ”, bir öğe için opaklık düzeyini belirler. Opaklık seviyesi şeffaflık seviyesini gösterir, burada ' 1 ” şeffaflık olmaması için kullanılır ve “ 0,5 ' için ' elli% ” şeffaflık.
  • “ geçiş ” CSS'de, kullanıcıların özellik değerlerini belirli bir süre boyunca sorunsuz bir şekilde değiştirmesine izin verir.
  • “ marj ”, bir elemanın etrafındaki tanımlanmış sınırın dışındaki boşluğu tanımlar.

Çıktı

4. Adım: “:hover” Sözde Seçiciyi uygulayın

Şimdi, “ boyunca div kabına erişin. :vurgulu ” Fareyi üzerlerine getirdiğimizde öğeleri seçmek için kullanılan sözde seçici:

.ana öğe : üzerine gelin {

opaklık : 1 ;

}

Ardından, “ opaklık ' olarak seçilen öğenin ' 1 ” şeffaflığı kaldırmak için.

Çıktı

Bu tamamen geçiş CSS 'görüntüleme' ve 'opaklık' özelliklerini ayarlamakla ilgilidir.

Çözüm

Geçiş 'display' ve 'opacity' özelliklerini ayarlamak için öncelikle

öğesini kullanarak bir div kabı oluşturun. Ardından, div öğesine erişin ve “ görüntülemek ' gibi ' engellemek ”. Bundan sonra, ' dahil olmak üzere diğer CSS özelliklerini uygulayın. arka plan görüntüsü ”, kaba bir görüntü eklemek için, “geçiş”, “opaklık” ve diğerleri. Bu gönderi, CSS ile geçişi ayarlama yöntemini açıkladı ' görüntülemek ' Ve ' opaklık ' özellikler.

Diğer

Kategori

Popüler Mesajlar

Littlest JupyterHub (TLJH) Debain 11/12 ve Ubuntu 20.04 LTS/22.04 LTS'ye Nasıl Kurulur

Windows PowerShell'i Başlatma Adımları Nelerdir?

CSS Kullanarak Onay İşareti/Tık Çizme

Terraform AWS Sağlayıcısı Nasıl Kullanılır?

Windows'ta 'Bağlı değil - Kullanılabilir bağlantı yok' Hatası Nasıl Onarılır

PHP md5() İşlevi Nasıl Kullanılır?

Adopt Me Roblox'ta Bir Papağanın Değeri Nedir?

Python için SDK Kullanarak Lambda İşlevi Nasıl Silinir (Boto3)?

HKEY_USERS | Bir Kullanıcı Profilini Klasörlerle Nasıl Eşleştirirsiniz?

C++ Seekg() İşlevi

Windows Sistem Geri Yükleme Noktaları Nasıl Yönetilir?

Dockerfile Dosyanızda “apt install” Nasıl Doğru Kullanılır?

JavaScript ile onClick Nasıl Ayarlanır

Linux Mint 21'de Firefox Nasıl Yeniden Yüklenir

“/daily_theme” Komutu Nedir ve Yolculuk Arasında Nasıl Kullanılır?

Java'da Kaçış Dizileri Nedir?

C++'da Kesirli Sırt Çantası Problemi Nasıl Çözülür?

Java'da Character.toUpperCase() nedir?

C# LINQ'da Sorgu Yazma

C#'ta Pair Nasıl Kullanılır?