Alpha channel and Opacity
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="AlphaChannelAndOpacity.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>alpha channel and opacity</title>
</head>
<body>
<h1>Use Alpha channel</h1>
<h2>Use Opaity</h2>
<h3>Using Opacity</h3>
</body>
</html>
CSS
/* ALPHA CHANNEL */
h1:hover {
background-color: rgba(255, 0, 12, 0.7);
/* HERE a-alpha channel range 0-1
alpha channel sets opacity for *color* */
}
h2:hover {
/* ALPHA CHANNEL IN HEXA-DECIMAL FORM */
background-color: #4dff00a1;
}
/* OPACITY */
h3:hover {
background-color: yellow;
border: 15px;
opacity: 0.5;
/* HERE OPACITY CAN CONTROL HOW THE ELEMENT CAN TO BE VIEWED */
/* It sets opacity for the *element* */
}
Comments
Post a Comment