*

背景画像だけ透明にしたい。background-color:rgbaを使う。

公開日: : 最終更新日:2013/12/26 css3, html5, 未分類

今回は、背景画像だけを透明にしてみました。

背景の上に透明な色を乗せたいや、テキストを書く要素を透明(マスク)にしたいなどあると思いましたので、
今回は透明な要素を乗せるという事をしてみました。

このようなことをすると、例えば、背景が画像でその上にテキストを書くと、画像のせいでテキストが醜いという事が多くあると思います。
そのようなときに、テキストを書く部分に透明な色を乗せると、テキストが読みやすくなります。そして、背景画像も見えるのでとても見やすいサイトになると思います。

早速ですが、こちらを見てください。
111
デモ01

これは、通常の場合で、透明な色もなにもしていない状態です。
デモ01のソースはこちらです。
(最後の所にダウンロードできるようになっています。)
htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="wrap">
     <div id="box01">テキストを入力します。</div><!--wrap-->
</div><!--wrap-->

</body>
</html>

cssファイル

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#FFF;
}
#wrap{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background:url(Apple.jpg) no-repeat top;
}

#box01{
	width:300px;
	height:150px;
	margin:0 auto;
	position:relative;
	background-color: #008800;
	text-align: center;
}

この背景画像に透明を乗せたいと思います。
透明にするには、cssで書くとopacityを使用することがあります。
ですが、opacityを使用すると背景画像は透明になるがその後の子要素も透明になってしまいます。
opacityを使用するとこのようになってしまいます。
222
デモ02
デモ02のソースはこちらです。
(最後の所にダウンロードできるようになっています。)
htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="wrap">
<div id="wrap01">
     <div id="box01">テキストを入力します。</div><!--wrap-->
</div><!--wrap01-->
</div><!--wrap-->

</body>
</html>

htmlファイル

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#FFF;
}
#wrap{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background:url(Apple.jpg) no-repeat top;
}
#wrap01{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background-color: #000000;
	opacity:0.5;/*opacityを使用すると、後の子要素まで透明になってしまう。*/
}

#box01{
	width:300px;
	height:150px;
	margin:0 auto;
	position:relative;
	background-color: #008800;
	text-align: center;
}

わかりますでしょうか?
今回は、画像の上に、黒色の透明を乗せています。
テキストを書く要素(緑の部分)も透明になってしまいます。
このままでは、とても見づらくなってしまいます。

そこで、どうすれば子要素は、透明しないようにするのか。
やり方は、2つありました。

まず簡単な方法としては、透明にする部分を画像にする。
するとこのようになります。
333
デモ03
デモ03のソースはこちらです。
(最後の所にダウンロードできるようになっています。)
htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="wrap">
<div id="wrap01">
     <div id="box01">テキストを入力します。</div><!--wrap-->
</div><!--wrap01-->
</div><!--wrap-->

</body>
</html>

cssファイル

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#FFF;
}
#wrap{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background:url(Apple.jpg) no-repeat top;
}
#wrap01{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background:url(mask2.png);/*透明にするために画像を使用する。*/
	text-align: center;
}

#box01{
	width:300px;
	height:150px;
	margin:0 auto;
	position:relative;
	background-color: #008800;
	text-align: center;
}

このようにすれば、解決はできると思います。

もうひとつは、cssで書く方法。
background-color:rgbaを使用する方法です。
画像ではなくてcssで書きたいという方もいると思います。
(実は、私は、このタイプです。なんか読み込む時に負荷がかかってるというか遠回りしている気がして・・・)
透明な画像を作成して、変更したいときにまた画像を作りなおしてといった作業も手間な気がします。
なので、私は、この方法の方がおすすめです。
デモ04
デモ04のソースはこちらです。
(最後の所にダウンロードできるようになっています。)
htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="wrap">
<div id="wrap01">
     <div id="box01">テキストを入力します。</div><!--wrap-->
</div><!--wrap01-->
</div><!--wrap-->

</body>
</html>

cssファイル

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#FFF;
}
#wrap{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background:url(Apple.jpg) no-repeat top;
}
#wrap01{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background-color:rgba(0,0,0,0.5);/*background-color:rgbaを使用すると、現在の要素だけが透明になる。*/
}

#box01{
	width:300px;
	height:150px;
	margin:0 auto;
	position:relative;
	background-color: #008800;
	text-align: center;
}

以上のようにすればうまくいくと思います。

ダウンロードはこちらから。
デモ01
デモ02
デモ03
デモ04

————————————————————————————————————-
補足=今回は、2つの方法がありました。
私は、background-color:rgbaを使用する方法の方がおすすめです。
この場合だと、わざわざ画像を作成することなく色の指定ができます。透明度も変更することができます。
色々と便利な面があると思うので、ぜひ使ってみてください。


関連記事

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑