「背景色を半透明」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

背景色を半透明

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色を半透明</title>
</head>
<body>
<h1>背景色を半透明</h1>
<style type="text/css">
.wrap
{
background:#ffcc00;
padding:0.5em;
}
.wrap2
{
margin-top:0.5em;
padding:0.5em;
background: #0000ff;
background: -moz-linear-gradient(#ffcc00, #0000ff);
background: -o-linear-gradient(#ffcc00, #0000ff);
background: -webkit-linear-gradient(#ffcc00, #0000ff);
background: linear-gradient(#ffcc00, #0000ff);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffcc00', endColorstr='#0000ff');
}
h2
{
margin:0;
padding:0;
font-size:1.2em;
}
.alpha
{
display:inline-block;
margin-top:1em;
padding:0.5em;
border:1px solid #ccc;
}
.alpha h3
{
margin:0;
padding:0;
font-size:1em;
}
.alpha p
{
margin:0;
padding:0.5em 0;
}
.opa100
{
backgeound-color:#fff;
background:rgba(255, 255, 255, 1.0);
}
.opa75
{
backgeound-color:#fff;
background:rgba(255, 255, 255, 0.75);
}
.opa50
{
backgeound-color:#fff;
background:rgba(255, 255, 255, 0.5);
}
.opa25
{
backgeound-color:#fff;
background:rgba(255, 255, 255, 0.25);
}
.opa0
{
backgeound-color:#fff;
background:rgba(255, 255, 255, 0.0);
}
</style>
<div class="wrap">
<h2>背景が単一色のサンプル</h2>
<div class="alpha opa100">
<h3>不透明度100%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa75">
<h3>不透明度75%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa50">
<h3>不透明度50%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa25">
<h3>不透明度25%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa0">
<h3>不透明度0%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
</div>
<div class="wrap2">
<h2>背景がグラデーションのサンプル（※グラデじゃなくて画像でもこんな感じの不透明）</h2>
<div class="alpha opa100">
<h3>不透明度100%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa75">
<h3>不透明度75%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa50">
<h3>不透明度50%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa25">
<h3>不透明度25%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
<div class="alpha opa0">
<h3>不透明度0%</h3>
<p><img src="images/catnapsample.gif" /></p>
</div>
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>