透過画像

普通の画像と、透過の画像の違い

gifとpngには透過という機能があります。

普通の画像の場合、背景色のあるところに入れると画像の背景色がそのまま表示されるので画像の輪郭が見えてしまいます。

これはページの背景色と画像の背景色を同じにすることで、画像の輪郭が見えないようにできます。

しかし、この方法ではページの背景の色を変えると画像の背景色も変える必要があります。

画像の背景を透過（透明）に指定するとページの背景が透けて見えるようになるので、どのような背景でも大丈夫になります。

課題 touka.html

透過機能を使った画像を作成し、いろいろな背景色のところに配置したページを作成しなさい。ファイルの名前は touka.html とし、index.html からいけるようにリンクを作成します。

bodyに指定した背景だと１色しか試せませんので、たとえばｐタグにclassを設けて色指定し、その中に画像をおきます。

スタイルシートに

p.haikei1 {background-color:#99ff99;}
p.haikei2 {background-color:#ffff99;}
p.haikei3 {background-color:#000099;color:#ffffff;}
p.haikei4 {background-color:#990000;color:#ffffff;}

背景色が暗いところと明るいところ両方をつくります。背景色が暗いときは文字の色を明るいものにします。

bodyには

<p class="haikei1">いろいろな背景のpタグの中に<img src="images/yuri62.png" alt="ゆりの花" />透過指定をした画像を配置します。</p>

というように文字と画像を適当に配置します。

こんな感じにできあがります。

いろいろな背景のpタグの中に透過指定をした画像を配置します。

いろいろな背景のpタグの中に透過指定をした画像を配置します。

いろいろな背景のpタグの中に透過指定をした画像を配置します。

いろいろな背景のpタグの中に透過指定をした画像を配置します。