17.12.2013
4.54 / 28 oy

Css ile Transparan Div işlemleri

Opacity Nedir?

Opacity, transparanlık düzeyi olaraktanımlanabilir. 0 ile 1 arası bir değer alan opacity, 0 için görünmez, 1 için ise arkasını göstermez bir yapıya bürünürken; örneğin 0.5 değeri için yarı transparan olur ve arkasındaki öğelerin de görünür olmasını sağlar.

CSS Opacity Nasıl Kullanılır?

Yukarıdaki tanıma benzer şekilde, istediğimiz division'a opacity öelliği ekleyerek transparanlık seviyesini belirlememiz mümkündür. Örnek olarak aşağıdaki iki div'i inceleyecek olursak:

CSS Opacity Kullanımı

Aşağıdaki iki div'i dikkate alacak olursak, "üstteki bölüm" yazılı division'u transparan yaparak "alttaki bölüm" yazılı div'in tamamının görünür olması için:

css opacity

Aşağıdaki kodlarda aynı şekiller kodlanarak, aşağıdaki div'e opacity (bu örnek için 0.4) özelliği eklenmiştir.

CSS Opacity Örneği

css opacity

İşte bu kadar basit. Artık üstteki bölüm başlıklı div'imiz transparanlaştırılmış ve alttaki bölümün tamamının göünür olması sağlanmıştır.

css opacity

Css ile Transparan Div işlemleri
Bu makalenin telif hakkı ve tüm sorumlulukları yazara ait olup, şikayetler için lütfen bizimle iletişime geçiniz.
URL:
Etiketler:

Bu makale 2688 kez okundu

17.12.2013 tarihinde yazıldı
Reitix

Yorumlar

  • alsancak
    alsancak
    16.5.2018

    jquery ile transition geçiş efekti de verilebilir, jquery animasyon kütüphanesi diye aratırsanız bol miktarda hazırlanmış kaynak var zaten

  • bukagan
    bukagan
    27.5.2016

    opacity değeri girerken hata alan arkadaşların en sık yaptığı hata el alışkanlığı sebebiyle virgül kullanmaktır. halbuki 0 ile 1 arasında 0.5 gibi bir değeri nokta ile yazsalar transparan resim ya da element oluşturma işlemleri tamamen çözülür

  • umitoş
    umitoş
    25.5.2015

    evet division içerisini ne kadar görebileceğini de sen seçiyorsun

  • nuriu69
    nuriu69
    25.12.2014

    noluyo div'in içi mi gözüküyo yani?

  • deli
    deli
    29.9.2014

    hazır framework'lerde bulamadım, teşekkürler

Bu yazıya siz de yorum yapabilirsiniz