7css arkaplan.fw min

Css Ders 7 | Arka Plan

CSS arka plan özellikleri, öğeler için arka plan efektlerini tanımlamak için kullanılır.

Bu bölümlerde, aşağıdaki CSS arka plan özelliklerini öğreneceksiniz:

  • Arka plan rengi
  • Arka plan resmi
  • Arkaplan tekrarı
  • Arka plan konumu

CSS arka plan rengi

background-color Nitelik bir elemanın arka plan rengini belirler.

body {
  background-color: lightblue;
}

CSS ile renk genellikle şu şekilde belirtilir:

  • Geçerli bir renk adı – “red” gibi
  • Bir HEX değeri – “#ff0000” gibi
  • Bir RGB değeri – “rgb(255,0,0)” gibi

Opaklık / Şeffaflık

opacity Nitelik bir elemanın şeffaflığı belirtir. 0.0 – 1.0 arasında bir değer alabilir. Değer ne kadar düşükse, o kadar şeffaftır:

cssder7img1
div {
  background-color: green;
  opacity: 0.3;
}

CSS arka plan resmi

background-image Nitelik bir elemanın arka plan olarak kullanmak üzere bir görüntü belirtir.

Varsayılan olarak, görüntü tüm öğeyi kaplayacak şekilde tekrarlanır.

body {
  background-image: url("paper.gif");
}

CSS arka plan tekrarı

Varsayılan olarak, background-image özellik bir görüntüyü hem yatay hem de dikey olarak tekrarlar.

Bazı resimler yalnızca yatay veya dikey olarak tekrarlanmalıdır, aksi takdirde tuhaf görüneceklerdir.

Yatay olarak tekrarlamak için: background-repeat: repeat-x;

Bir görüntüyü dikey olarak tekrarlamak için, background-repeat: repeat-y;

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
  background-repeat: repeat-y;
}

Bir görüntüyü yalnızca bir kez göstermek için yani tekrarlamamak için, background-repeat:no-repeat; kullanıyoruz.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

CSS arka plan konumu

background-position arka plan resminin konumunu belirtmek için kullanılır.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Örnekte, resmi sağ üst köşeye yerleştirmiş olduk.

Arkaplan özelliklerini tek bir bildirimde birleştirmek için ise aşağıdaki kod bloğu gibi yazabiliriz.

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
Sıralama şu şekildedir:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
İletişim: admin@herseymi.com
Yazı oluşturuldu 96

Bir Yorum Yazın

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön