*

背景画像だけ透明にしたい。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

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

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

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

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

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

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

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

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

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

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑