*

背景画像だけ透明にしたい。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を使用する方法の方がおすすめです。
この場合だと、わざわざ画像を作成することなく色の指定ができます。透明度も変更することができます。
色々と便利な面があると思うので、ぜひ使ってみてください。


関連記事

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

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

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

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

本日からblogを書きます。

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

記事を読む

Message

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

PAGE TOP ↑