CSS Arka Planları
CSS arka plan özellikleri, öğelere arka plan efektleri eklemek için kullanılır.
Bu bölümlerde, aşağıdaki CSS arka plan özellikleri hakkında bilgi edineceksiniz:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(stenografi özelliği)
CSS arka plan rengi
Özellik background-color, bir öğenin arka plan rengini belirtir.
Örnek
Bir sayfanın arka plan rengi şu şekilde ayarlanır:
body {
background-color: lightblue;
}
CSS ile bir renk çoğunlukla şu şekilde belirtilir:
- geçerli bir renk adı - "kırmızı" gibi
- bir HEX değeri - "#ff0000" gibi
- bir RGB değeri - "rgb(255,0,0)" gibi
Olası renk değerlerinin tam listesi için CSS Renk Değerlerine bakın .
Diğer Elemanlar
Herhangi bir HTML öğesi için arka plan rengini ayarlayabilirsiniz:
Örnek
Burada <h1>, <p> ve <div> öğeleri farklı arka plan renklerine sahip olacaktır:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Opaklık / Şeffaflık
Özellik opacity, bir öğenin opaklığını/saydamlığını belirtir. 0.0 - 1.0 arasında bir değer alabilir. Değer ne kadar düşükse, o kadar şeffaftır:
opaklık 1
opaklık 0,6
opaklık 0,3
opaklık 0.1
Örnek
div {
background-color: green;
opacity: 0.3;
}
Not: Bir opacityöğenin arka planına saydamlık eklemek için özelliği kullanırken, tüm alt öğeleri aynı saydamlığı devralır. Bu, tamamen saydam bir öğenin içindeki metnin okunmasını zorlaştırabilir.
RGBA kullanarak şeffaflık
Yukarıdaki örneğimizde olduğu gibi alt öğelere opaklık uygulamak istemiyorsanız, RGBA renk değerlerini kullanın. Aşağıdaki örnek, metnin değil arka plan renginin opaklığını ayarlar:
%100 opaklık
%60 opaklık
%30 opaklık
%10 opaklık
RGB'yi bir renk değeri olarak kullanabileceğinizi CSS Renkleri Bölümümüzden öğrendiniz . RGB'ye ek olarak, bir rengin opaklığını belirten alfa kanalıyla (RGB A ) bir RGB renk değeri kullanabilirsiniz .
Bir RGBA renk değeri şu şekilde belirtilir: rgba(red, green, blue, alpha ). Alfa parametresi , 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.
İpucu: CSS Renkleri Bölümümüzde RGBA Renkleri hakkında daha fazla bilgi edineceksiniz .
Örnek
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}