HTML - CSS, Kod Örnekleri

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ı…

Tagged

3 thoughts on “Arkaplan resminizi transparan yapma kodu (CSS)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.