menu
menu

キーワード検索

CSS3で背景色の透過

  • Labs

CSS3

こんにちは(・∀・)

今回はCSS3を使用して背景色を透過させるサンプルのご紹介です。boxに背景色を設定して80%で表示させます。

サンプル
background background background background background background background background background background background background background background background background
サンプルです。
要素の上に黒背景の要素を重ねてます。
背景が透過してます。
HTML

<div class="box1">
background background
background background
background background
background background
background background
background background
background background
background background
</div>
<div class="box2">
サンプルです。<br>
要素の上に黒背景の要素を重ねてます。<br>
背景が透過してます。
<!--box--></div>
CSS

.box1 {
	width: 220px;
	height: 220px;
	padding: 5px 10px;
}
.box2 {
	color: #ccc;
	background: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);/*IE7*/
	position: relative;
	top: -150px;
	left: 50px;
	width: 220px;
	height: 220px;
	padding: 10px;
}
関連リンク

CSS3リファレンス

  • カテゴリー:Labs