CSS arka plan özellikleri, öğelere arka plan efektleri eklemek için kullanılır.
Bu bölümlerde aşağıdaki CSS arka plan özelliklerini öğreneceğiz.
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(kısa özellik)
CSS background-color
background-color özelliği, bir öğenin arka plan rengini belirtir.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu sayfanın arka plan rengi açık mavidir. (lightblue) rengi!</p>
</body>
</html>
CSS’de bir renk çoğunlukla şu şekilde belirtilir:
- geçerli bir renk adı – “red,blue” gibi
- “#ff0000” gibi bir HEX değeri
- “rgb(255,0,0)” gibi bir RGB değeri
Herhangi bir HTML öğesinin arka plan rengini ayarlayabilirsiniz:
Burada <h1>,<p> ve <div> öğeleri farklı arka plan renklerine sahip olacaktır:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS Arka Plan Renk Örneği!</h1>
<div>
Buradaki Div Ögesinin Rengi.
<p>Paragraf rengi daha farklı olacak.</p>
Burası da div'e dahil
</div>
</body>
</html>
Opacity / Transparency (Opaklık / Şeffaflık)
Opaklık özelliği, bir öğenin opaklığını/şeffaflığını belirtir. 0,0 – 1,0 arasında değer alabilir. Değer ne kadar düşük olursa o kadar şeffaf olur.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<div class="first">
<h1>Opaklık 0.1</h1>
</div>
<div class="second">
<h1>Opaklık 0.3</h1>
</div>
<div class="third">
<h1>Opaklık 0.6</h1>
</div>
<div>
<h1>Opaklık 1 (Varsayılan)</h1>
</div>
</body>
</html>
Not: Bir öğenin arka planına saydamlık eklemek için opacity özelliği kullanıldığında, öğenin tüm alt öğeleri aynı saydamlığı devralır. Bu, tamamen şeffaf 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:
CSS Renkler Bölümümüzde RGB’yi renk değeri olarak kullanabileceğinizi öğrendiniz. RGB’ye ek olarak, bir rengin opaklığını belirten alfa kanalına (RGBA) sahip bir RGB renk değeri kullanabilirsiniz. Bir RGBA renk değeri şu şekilde belirtilir: rgba(kırmızı, yeşil, mavi, alfa). Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında bir sayıdır.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
background: rgba(0, 128, 0, 0.3);
}
div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<p>Opacity Kullanılarak Yazılan Kod:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>rgba() Kullanılarak Yazılan Kod:</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
</body>
</html>
