The 'a' attribute in the rgba color scheme in CSS stands for "alpha" and controls the opacity (or transparency) of a color. The rgba function allows you to define colors using red, green, blue, and alpha channels, where the alpha channel determines the opacity of the color.
The alpha value ranges from 0 to 1, where 0 represents full transparency (completely invisible), and 1 represents full opacity (not transparent).
Example
background-color: rgba(0, 0, 255, 0.7);
Above statement defines the background color of an element using the rgba color model. In this context, rgba stands for Red, Green, Blue, and Alpha. The values (0, 0, 255) represent the color blue in the RGB spectrum, with the first three values indicating that there is no red (0), no green (0), and full intensity of blue (255). The alpha value, set to 0.7, controls the transparency of this blue color. Specifically, an alpha of 0.7 means that the blue background will be 70% opaque and 30% transparent, allowing some of the underlying content or background to be partially visible through the blue color. This creates a semi-transparent blue effect.
colorOpacity.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Opacity Example</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: space-around; align-items: center; height: 100vh; background-color: #f0f0f0; } .box { width: 150px; height: 150px; margin: 10px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px; font-weight: bold; border-radius: 10px; } .box1 { background-color: rgba(0, 0, 255, 1); /* Fully opaque blue */ } .box2 { background-color: rgba(0, 0, 255, 0.7); /* 70% opaque blue */ } .box3 { background-color: rgba(0, 0, 255, 0.5); /* 50% opaque blue */ } .box4 { background-color: rgba(0, 0, 255, 0.3); /* 30% opaque blue */ } .box5 { background-color: rgba(0, 0, 255, 0.1); /* 10% opaque blue */ } .box6 { background-color: rgba(0, 0, 255, 0); /* 10% opaque blue */ } </style> </head> <body> <div class="box box1">Opacity 1.0</div> <div class="box box2">Opacity 0.7</div> <div class="box box3">Opacity 0.5</div> <div class="box box4">Opacity 0.3</div> <div class="box box5">Opacity 0.1</div> <div class="box box6">Opacity 0</div> </body> </html>
Above snippet generate below screen.
No comments:
Post a Comment