RGBA ile Şeffaflık

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 28 / 76.

CSS'te RGBA renkleri, bir rengin opaklığını belirtmek için alfa kanalı içeren RGB renklerinin bir uzantısıdır. RGBA; Kırmızı, Yeşil, Mavi ve Alfa anlamına gelir. Alfa parametresi, 0.0 (tamamen saydam) ile 1.0 (tamamen opak) arasında bir sayıdır ve farklı saydamlık derecelerine sahip renkler oluşturmanı sağlar.

CSS'te RGBA renklerini kullanmanın temel söz dizimi şöyledir:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Örneğin:

p {
    color: rgba(255, 0, 0, 0.5); /* Yarı saydam kırmızı */
    background-color: rgba(0, 255, 0, 0.3); /* Yarı saydam yeşil */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Yarı saydam mavi */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah katman */
}

Görev

Kolay

Size bir <h3> başlığı ve bir <p> paragrafı içeren bir HTML belgesi veriliyor. Göreviniz, bu öğeleri şeffaflıkla biçimlendirmek için background-color özelliğini rgba() işleviyle kullanmaktır. Aşağıdaki adımları izleyin:

<h3> öğesini hedefleyen bir CSS kuralı yazın. rgba(0, 0, 255, 0.5) kullanarak arka plan rengini mavi olarak ayarlayın (%50 şeffaflık).
<p> öğesini hedefleyen bir CSS kuralı yazın. rgba(0, 128, 0, 0.3) kullanarak arka plan rengini yeşil olarak ayarlayın (%30 şeffaflık).

Kendin dene

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>