CSS3 Opaklığı hakkında bilgi edinin

Arka Planlarınızı Şeffaf Hale Getirmek

Baskı tasarımında kolayca yapabildiğiniz, ancak Web üzerinde yapamayacağınız şeylerden biri, görüntü veya renkli arka plandaki metinleri kaplar ve bu görüntünün saydamlığını, metnin arka plana kayması için değiştirir. Ancak, CSS3'te , öğelerinizin opaklığını değiştirmenizi sağlayacak bir özellik var:

Opaklık Özelliği Nasıl Kullanılır?

Opaklık özelliği, saydamlık miktarının değerini 0.0 ila 1.0 arasında alır.

0.0% 100 şeffaftır - bu öğenin altındaki herhangi bir şey tamamen gösterecektir. 1.0% 100 opak - öğenin altında hiçbir şey gösterilmeyecek.

Yani, bir öğeyi% 50'ye kadar şeffaf bir şekilde ayarlamak için şunu yazarsınız:

opaklık: 0.5;

Hareket halindeki bazı opaklık örneklerine bakın.

Eski Tarayıcılarda Test Etmek İçin Emin Olun

Ne IE 6 ne de 7 CSS3 opaklık özelliğini desteklemez. Ama sen şanstan yoksun. Bunun yerine, IE, Microsoft'a özel bir özellik alfa filtresi destekler. IE'deki alfa filtreleri, 0'dan (tamamen şeffaf) 100'e (tamamen opak) değerleri kabul eder. Böylece, saydamlığınızı IE'de elde etmek için, opaklığınızı 100 ile çarpmanız ve stilinize bir alfa filtresi eklemeniz gerekir:

filtre: alfa (opaklık = 50);

Alfa filtresini çalışırken görün (yalnızca IE)

Ve Tarayıcı Öneklerini Kullan

-moz- ve -webkit-öneklerini kullanmalısınız, böylece Mozilla ve Webkit tarayıcılarının eski sürümleri de destekliyor:

-webkit-opaklık: 0.5;
-moz-opaklık: 0.5;
opaklık: 0.5;

Her zaman tarayıcı öneklerini ve geçerli CSS3 özelliğini son olarak yerleştirin.

Eski Mozilla ve Webkit tarayıcılarında tarayıcı öneklerini test edin.

Görüntüleri Şeffaf Yapabilirsin

Görüntüdeki opaklığı ayarlayın ve arka plana dönüşecektir. Bu arka plan görüntüleri için gerçekten yararlıdır.

Ve bir bağlantı etiketine eklerseniz, yalnızca görüntünün opaklığını değiştirerek vurgulu efektler oluşturabilirsiniz.

a: hover img {
filtre: alfa (opaklık = 50)
filtre: progid: DXImageTransform.Microsoft.Alpha (opaklık = 50)
-moz-opaklık: 0.5;
-webkit-opaklık: 0.5;
opaklık: 0.5;
}

Bu HTML'yi etkiler:

Yukarıdaki stilleri ve HTML'yi işlem sırasında test edin.

Görüntülerinize Yazı Yazma

Saydamlık ile, bir resmin üzerine metin yerleştirebilir ve görüntünün metnin olduğu yerde kaybolmasını sağlayabilirsiniz.

Bu teknik biraz zordur, çünkü sadece görüntünün tamamını soldurmazsınız, çünkü bu tüm görüntüyü soldurur. Ve metin kutusunu da soldurmazsınız, çünkü metin de oralarda kaybolur.

1. Önce bir kapsayıcı DIV oluşturun ve görüntünüzü içine yerleştirin:

   
   

2. Resmi boş bir DIV ile izleyin - bu sayede şeffaf olacaksınız.

   
   
   

3. HTML’nize eklediğiniz son şey, içindeki metninizle DIV’dir:

   
   
   
   Bu benim köpeğim Shasta. O sevimli değil mi?

4. Resmi, resmin üzerine yerleştirmek için CSS konumlandırması ile stil uygulayabilirsiniz. Metnimi sol tarafa yerleştirdim, ancak iki sola değiştirerek sağa koyabilirsiniz: 0; sağa özellikler: 0; .

   #image {
   konum: göreceli;
   en: 170px;
   Yükseklik: 128px;
   marjı: 0;
   }
   #Metin {
   konum: mutlak;
   En: 0;
   Sol: 0;
   en: 60 piksel;
   Yükseklik: 118px;
   Arka plan: #fff;
   dolgu: 5px;
   }
   #Metin {
   filtre: alfa (opaklık = 70);
   filtre: progid: DXImageTransform.Microsoft.Alpha (opaklık = 70);
   -moz-opaklık: 0.70;
   opaklık: 0.7;
   }
   #kelimeler {
   konum: mutlak;
   En: 0;
   Sol: 0;
   en: 60 piksel;
   Yükseklik: 118px;
   Arka plan: transparent;
   dolgu: 5px;
   }

Nasıl göründüğünü görün