CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

RGBAを使用したCSSの透明性

CSSの透過性にはRGBA（）値を使用します。アルファチャネルパラメータを設定して、色の不透明度を指定します。

以下は、RGBAを使用してCSS透過性を実装するためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 200px;
   height: 200px;
   background-color: rgb(0, 0, 255);
   color: white;
   display: inline-block;
}
.transparent {
   background-color: rgba(0, 0, 255, 0.582);
}
</style>
</head>
<body>
<h1>Transparency using RGBA example</h1>
<div class="transparent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, accusantium.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, nisi!
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

RGBAを使用したCSSの透明性


  1. CSSの不透明度/透明度

    CSS Opacity / Transparencyの場合、opacityプロパティが使用されます。たとえば、 opacity: 0.3; 以下は、CSSを使用した不透明度/透明度を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;   &

  2. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig