Arkaplan resminizi transparan yapma kodu (CSS)

Aslında hiç CSS arkaplan-donukluk (background-opacity) özelliği yok fakat sözde bir görüntü ile gerçekleştirilebilir. Yani sahte görüntü diye tabir edebileceğimiz durum oluşuyor. İngilizcesiyle “transparent” yani transparanın ne olduğunu beni anlatmaya zorlamayın nolur. Çünkü başarılı olamayacağım gibi bir hisse kapıldım 🙂

Alın işte CSS kullanarak arkaplan resimlerini transparan yapabileceğiniz kodlar:

div {
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div:after {
    content: "";
    background: url(http://subtlepatterns.com/patterns/bo_play_pattern.png);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}

Kodlar üzerinde oynama yaparak daha farklı sonuçlar da elde edebiliriniz. “opacity:” kodu ile donukluğu ayarlayabilirsiniz. Özellikle boyut anlamına değinecek olursak “tam boyut” olarak verilmiş kodlarda. Siz belki daha farklı yaparsınız. Artık o sizin kodlarla güreşinize bağlı…

“Arkaplan resminizi transparan yapma kodu (CSS)” 3 yorum yapıldı.

Yorum Yapın

Önce deveni bağla sonra tevekkül et. (H.Ş.)