CSS Opaklık | Şeffaflık | Saydamlık
CSS Opaklık | Şeffaflık | Saydamlık artık her ne diyorsanız :)
CSS Opaklık | Şeffaflık | Saydamlık - (Opacity | Transparency)
Şeffaf Resim
Opaklık özelliği 0.0 - 1.0 arasında bir değer alabilir. Değer ne kadar düşükse, resim o kadar şeffaf olacaktır.
Örnek:
img {
opacity: 0.5;
}
Şeffaf Hover Etkisi
Opaklık özelliği, fareyle üzerine gelindiğinde opaklığı değiştirmek için genellikle :hover seçicisiyle birlikte kullanılır.
Örnek:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Örneği detaylı incelemek için buraya tıklayın.
Şeffaf Kutu
Bir öğenin arka planına saydamlık eklemek için opacity özelliğini kullanırken, tüm alt öğeleri aynı saydamlığı devralır. Bu, tamamen şeffaf bir öğenin içindeki metnin okunmasını zorlaştırabilir.
Örnek:
div {
opacity: 0.3;
}opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
RGBA Kullanarak Şeffaflık Verme
Yukarıdaki örneğimizde olduğu gibi alt öğelere opaklık uygulamak istemiyorsanız, RGBA renk değerlerini kullanabilirsiniz. Aşağıdaki örnek, metnin değil arka plan renginin opaklığını ayarlar.
Örnek:
div {
background: rgba(76, 175, 80, 0.3)
}100% opacity
60% opacity
30% opacity
10% opacity
RGB'yi bir renk değeri olarak kullanabileceğinizi CSS Renkler bölümümüzde öğrenmiştik. RGB'ye ek olarak, bir rengin opaklığını belirten alfa kanalı (RGBA) ile bir RGB renk değeri de kullanabilirsiniz.
Tepkiniz Nedir?
