CSS で背景を透明にする
Jay Singh
2023年2月20日
CSS の透明な色のおかげで、ページの別の上部要素から背景コンポーネントを見ることができます。background-color 属性を使用して、透明な色を作成できます。
CSS では、background-opacity と呼ばれるプロパティを使用して、書体などの他のコンポーネントに影響を与えることなく、要素の背景の不透明度または透明度を変更することはありません。CSS opacity プロパティを使用してこれを実現しようとすると、他のすべてのコンポーネントの不透明度も変更されます。
CSS で透明な背景色を変更する方法をいくつかの例で示します。
CSS で背景色と透明度を設定するために RGBA を使用する
CSS 3 で導入された色値の一部としてアルファ透明度を組み込んだ RGBA 色を利用できます。次の例に示すように、RGBA 色を使用して背景の色とその透明度を変更できます。
コード例：
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
CSS で透明な背景色を作成する
透明な背景色を作成するには、CSSRGBA() カラーコードを使用します。この効果は、訪問者にテキストの背景を表示して背面の画像を表示する場合に、要素に外観と感触を与えるのに役立ちます。
コード例：
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>