*

PC LIFE

ホーム >  Web制作 >  HTM5/CSS3 > 
12.背景画像の一部を半透明化 MENU 

12.css3 背景画像の部分的な半透明化など Chap 5-8,9,10

学習書の「sample_a」(Chap5_1-10)を表示しソースコードを見て下さい。
背景画像のサイズ、複数画像、半透明化
2つの同一サイズ(縦横150PX)画像を背景画像として、サイズを各変えて配置し、枠の内側を半透明にする方法。

CSS記述
  • 行番
  • 説 明
  • 2
  • 2個の画像指定で、カンマで区切り画像のURLを記述
  • 3
  • 画像が縦と横方向に繰り返して表示されるのをやめる
  • 4
  • 画像配置の位置の指定、「container」領域の左端上部位置より、2個の画像をカンマで区切り記述
    一番目画像 → 左から15px 上から420px 二番目画像 → 左から90px 上から500px
  • 5
  • 画像サイズの指定、一番目が縦横:94px、2番目が縦横:30pxと指定している
  • 8-11
  • 枠の内側の影を付ける
  • 12
  • 枠の背景色、半透明化には色の指定を「rgba」にし、255 255 255 は白で、0.5が透明度
    カラー指定の rgba の4桁目aは、alphaの略で透明度を指す