背景を半透明

HTML CSS

背景を半透明にしてみましょう(。・ω・。)ﾉ
今回はCSS3を使うので、ブラウザによっては表示されないかもしれません。

まずは、適当に背景を用意して、background-imageプロパティで表示させます。
自分はフリー素材から取ってきました。

フロップデザイン　←こちらのサイトから取ってきました。

HTMLファイルのほうは、下記の通りに入力します。


<!DOCTYPE html>
<html lang="ja">
<head>
　　　　<meta charset="UTF-8">
　　　　<link rel="stylesheet" type="text/css" href="style.css">
　　　　<title>背景を半透明</title>
</head>
<body>
<div id="container_inner">
　　　　<p>
　　　　ボックスに対して半透明の白色を適用させて表示してます。
　　　　</p>
</div>
</body>
</html>
CSSファイルのほうは、下記の通りに入力します。

@charset "UTF-8";

body{
　　　　background-image:url(back_photo.gif);
　　　　font-size:14px;
　　　　font-weight:bold;
}
#container_inner{
　　　　background-color:rgba(255,255,255,0.6);
　　　　width:500px;
　　　　height:114px;
　　　　margin-left:auto;
　　　　margin-right:auto;
}
p{
　　　　text-align:center;
　　　　padding-top:50px;
}

これで一部だけ半透明に表示します！

数字の部分は、左から「赤」「緑」「青」「アルファチャンネル」の値を指定します。
「0」と指定すると完全な透明になり、「1」と指定すると不透明になります。

完成見本はこちら
http://www6.ocn.ne.jp/~yokotchi/blog/sample04/index.html