CSS Arka Plan

CSS arka plan özellikleri, elementin arka plan etkilerini tanımlamak için kullanılır.

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

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color Arka plan rengi için özellik belirler.

Örnek

Sayfanın arka plan rengi aşağıdaki gibi ayarlanmıştır:

body {
  background-color: lightblue;
}

Kişisel Deneyim

CSS, renkleri genellikle aşağıdaki gibi belirtir:

  • Geçerli renk adları - örneğin "red"
  • Onaltılık değer - örneğin "#ff0000"
  • RGB değeri - örneğin "rgb(255,0,0)"

Bakınız CSS Renk Değerleriolabilir. Olası renk değerlerinin tam listesini almak için.

Diğer elementler

Herhangi bir HTML elementine arka plan rengi ayarlayabilirsiniz:

Örnek

Burada, <h1>, <p> ve <div> elementleri farklı arka plan renklerine sahip olacak:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

Kişisel Deneyim

şeffaflık / ışık geçirirlik

opacity özelliği, elementin şeffaflığını/ışık geçirirliğini belirtir. Değer aralığı 0.0 - 1.0 arasındadır. Değer ne kadar düşükse, o kadar şeffaf olur:

şeffaflık 1
şeffaflık 0.6
şeffaflık 0.3
şeffaflık 0.1

Örnek

div {
  background-color: green;
  şeffaflık: 0.3;
}

Kişisel Deneyim

Dikkat:Kullanarak şeffaflık Arka plan rengi için şeffaflık eklediğinizde, tüm alt elemanlar aynı şeffaflığı miras alır. Bu, tamamen şeffaf bir elemandaki metni okumayı zorlaştırabilir.

RGBA'nın şeffaflığı kullanarak

Alt elemanlara şeffaflık uygulamak istemezseniz, yani yukarıdaki örnek, aşağıdaki kullanılır: RGBA Renk değeri. Aşağıdaki örnek, arka plan rengi yerine metnin şeffaflığını ayarlar:

100% şeffaflık
60% şeffaflık
30% şeffaflık
10% şeffaflık

sitemizden CSS Renkleri bölümünde RGB'yi renk değeri olarak kullanmanın nasıl yapılabileceğini öğrendik. RGB renk değerlerinin yanı sıra, RGB renk değerlerini alpha kanallar birlikte kullanılır (RGBA) - Bu kanal, rengin şeffaflığını belirtir.

RGBA renk değeri belirtilir: rgba(kırmızı, yeşil, mavi, alpha)。alpha Parametreler 0.0 (tamamen şeffaf) ve 1.0 (tamamen mat) arasında sayısal değerlerdir.

İpucu:Sitemizde CSS Renkleri Bölümde RGBA renklerinin hakkında daha fazla bilgi öğrendik.

Örnek

div {
  background: rgba(0, 128, 0, 0.3) /* 30% şeffaflıkta yeşil arka plan */
}

Kişisel Deneyim