Color and Transparency
opacity
Purpose: Set the opacity of an element and all its child elements. The value range is 0.0 (completely transparent) to 1.0 (completely opaque), and the default value is 1.0.
<div class="opaque-element">Opacity: 1.0 (default)</div>
<div class="semi-transparent-element">Opacity: 0.5</div>
<div class="transparent-element">Opacity: 0.0</div>
<style>
.opaque-element {
background-color: #f0f0f0;
padding: 10px;
}
.semi-transparent-element {
background-color: #f0f0f0;
opacity: 0.5; /* Set opacity to 50% */
padding: 10px;
}
.transparent-element {
background-color: #f0f0f0;
opacity: 0.0; /* Set opacity to 0%, completely transparent */
padding: 10px;
}
</style>rgba()
Purpose: Defines a color with RGBA (red, green, blue, alpha) color mode, where the alpha channel is used to specify the opacity of the color. The syntax is rgba(red, green, blue, alpha), where red, green, blue range from 0 to 255 or percentage (0% to 100%), and alpha ranges from 0.0 to 1.0.
<div class="color-box rgba-50">RGBA: 50% Opacity</div>
<div class="color-box rgba-25">RGBA: 25% Opacity</div>
<div class="color-box rgba-0">RGBA: 0% Opacity (Transparent)</div>
<style>
.color-box {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.rgba-50 {
background-color: rgba(255, 0, 0, 0.5); /* red, 50% opacity */
}
.rgba-25 {
background-color: rgba(0, 255, 0, 0.25); /* green, 25% opacity */
}
.rgba-0 {
background-color: rgba(0, 0, 255, 0.0); /* Blue, 0% opacity (transparent) */
}
</style>hsla()
Purpose: Defines a color with the HSLA (hue, saturation, lightness, alpha) color model, where the alpha channel is used to specify the opacity of the color. The syntax is hsla(hue, saturation, lightness, alpha), where hue ranges from 0 to 360 (indicates the angle on the color wheel), saturation and lightness range from 0% to 100%, and alpha ranges from 0.0 to 1.0.
<div class="color-box hsla-50">HSLA: 50% Opacity</div>
<div class="color-box hsla-25">HSLA: 25% Opacity</div>
<div class="color-box hsla-0">HSLA: 0% Opacity (Transparent)</div>
<style>
.color-box {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.hsla-50 {
background-color: hsla(120, 100%, 50%, 0.5); /* Cyan, 100% saturation, 50% brightness, 50% opacity */
}
.hsla-25 {
background-color: hsla(30, 80%, "brightness.jpg", 0.25); /* Orange, 80% saturation, brightness.jpg", 25% opacity */
}
.hsla-0 {
background-color: hsla(240, "brightness.png", 0.0); /* Blue-purple, 100% saturation, brightness.jpg", 0% opacity (transparent) */
}
</style>currentColor
Purpose: CSS variable, representing the text color of the current element (color attribute value). It can be used where the text color needs to be inherited, such as borders, backgrounds, shadows, etc., to maintain visual consistency.
<div class="text-container">
<p class="custom-text-color">This text has a custom color.</p>
<div class="border-current-color">This box has a border color that matches the text color.</div>
</div>
<style>
.text-container {
color: #ff69b4; /* Set the text color in the container */
}
.custom-text-color {
color: #ff69b4; /* Explicitly set the text color */
}
.border-current-color {
border: 2px solid currentColor; /* The border color uses currentColor, which is the text color inherited from the parent */
padding: 10px;
margin-top: 10px;
}
</style>
