Opaklık CSS'de aşağıdaki gibi öğelerin şeffaflığını kontrol etmeyi belirten bir özelliktir: içerik veya Görüntüler . Bu özelliği kullanarak herhangi bir görseli tamamen opak olacak şekilde ayarlayabiliriz ( görünür ), tamamen şeffaf ( gizlenmiş ) veya yarı saydam (kısmen görünür). 0 ile 1 arasında sayısal bir değer alır. Burada 0 tamamen şeffaflığı, 1 ise tamamen görünürlüğü tanımlar. 0,2, 0,4, 0,6 vb. gibi 0 ile 1 arasındaki opaklık değerleri, ondalık değeri kademeli olarak artırarak görüntüyü şeffaftan opak hale getirir.
Sözdizimi
opacity :
Görüntünün yarı saydam olabilmesi için sayısal değerin 0 ile 1 arasında olması gerekir. 1 sağlarsak görüntü opak olur, sayısal değer 0 olursa görüntü tamamen şeffaf olur.
örnek 1 : Bu örnekte, fareyi öğenin üzerine getirdiğinizde öğeyi şeffaf hale getirmek için opacity özelliğini kullanacağız.
Ana.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Çıktı
arduino'nun fonksiyonları
Saydamlık veya opaklık efekti görüntülemek için fareyi kırmızı kutunun üzerine getirin.
CSS'de Geçiş Opaklığı
CSS'de bir geçiş opaklığı opaklık durumunu bir seviyeden başka bir duruma sorunsuz bir şekilde değiştirmek için kullanılan bir özelliktir. Bu, geçiş opaklığının opak öğenin durumunu belirli bir süre boyunca şeffaf olarak değiştirdiği anlamına gelir. Geçişin dört özelliği vardır: bir görüntü üzerinde opaklık efektini gerçekleştirmek için kullanılan geçiş özelliği, geçiş süresi, geçiş zamanlaması işlevi ve geçiş gecikmesi. geçiş süresi Milisaniye veya saniye cinsinden tanımlanmış bir süre boyunca bir öğe üzerindeki opaklık etkisini yansıtan kademeli değişiklikler veya ani değişiklikler için önemli bir özelliktir.
Geçişin kısa özelliği aşağıdaki gibidir:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
CSS'de geçiş opaklığını tanımlamaya yönelik sözdizimi
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Geçiş özelliği
Aşağıda geçiş efektlerini kontrol etmek için kullanılan geçiş özellikleri verilmiştir.
| Değer | Tanım |
|---|---|
| Geçiş özelliği | Görsellere geçiş efektini gösteren CSS özelliğinin adını tanımlamak için kullanılır. |
| Geçiş süresi | Geçiş efektinin görüntüleneceği zaman dilimini saniye veya milisaniye cinsinden tanımlamak için kullanılır. |
| Geçiş zamanlama fonksiyonu | Geçiş efektini göstermek amacıyla bir görüntü üzerinde hız eğrisini tanımlamak için kullanılır. |
| Geçiş gecikmesi | Geçiş efektinin öğede mi yoksa görüntüde mi başlatıldığını belirtir. |
Not: Görüntüye veya içeriklere geçiş özelliğini ayarlarken, geçiş süresi özelliğini tanımlamamız gerekir; aksi halde süre 0 olur ve herhangi bir etki göstermez.
CSS'de geçiş opaklığına duyulan ihtiyaç
opaklık Opaklık aralığını 0 ile 1 arasında ayarlayarak bir görüntünün şeffaflığını kontrol etmek için kullanılan basit bir CSS özelliğidir. Opaklık efektini göstermek için bir öğedeki statik veya ani değişimi yansıtır. Örneğin bir görseli şeffaf olarak göstermek istiyorsak opacity değerini 0'dan 1'e ayarlamamız gerekiyor. Bundan sonra opacity efektini biraz zaman almak yerine hemen gösteriyor. Bu nedenle, bir kullanıyoruz geçiş opaklığı CSS'de belirli bir süre boyunca bir öğenin şeffaflığını kontrol eden. Geçiş opaklığında geçiş zamanı fonksiyonunu kullanarak, bir görüntü üzerindeki hızlı opaklık etkisini belirten bir öğenin hız eğrisini belirleyebiliriz. Bu şekilde, geçiş opaklığı efektini, değişiklikleri hemen meydana gelmek yerine, belirtilen zaman diliminde yansıtmak için kullanırız.
Örnek 2: Bu örnekte opaklık etkisini hemen değil belirli bir süre içinde yansıtan geçiş opaklığı özelliğini kullanacağız.
Dosya1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Çıktı
