基金訓練に行ってきました。(41日目)

↑こんな風にしたいとき。

その1(教科書のやり方)

CSS部
.box {
width : 100px;
background-color: #CF9;
}
.box .bgTop {
background-repeat : no-repeat;
background-position : center top;
background-image: url(bgtop.gif);
width: 100px;
padding-top: 10px;
}
.box .bgBottom {
background-repeat : no-repeat;
background-position : center bottom;
background-image: url(bgbottom.gif);
width: 84px;
padding-bottom: 10px;
padding-right: 8px;
padding-left: 8px;
}

HTML部
<div class=”box”>
<div class=”bgTop”>
<div class=”bgBottom”>
文字文字文字文字文字文字
</div>
</div>
</div>

• 上の例は、教科書に載っているやり方ですが、上下端の画像の背景色と、ホームページに貼り付ける場所の背景色を同じにしないと画像の背景色が見えてしまいます。また、画像の背景を透明にすると、backgraound-colorで設定した色が角に出でしまい、角丸になりません。
• 上下端の画像サイズは、幅100px、高さ10pxです。

その2(背景に影響されないやり方)

CSS部
.box .bgTop {
background-image: url(bgtop.gif);
background-repeat: no-repeat;
background-position: center top;
width: 100px;
height: 10px;
}
.box .bgCenter {
width: 84px;
background-color: #0FF;
padding-right: 8px;
padding-left: 8px;
}
.box .bgBottom {
background-image: url(bgbottom.gif);
background-repeat: no-repeat;
background-position: center bottom;
width: 100px;
height: 10px;
}

HTML部
<div style=”box”>
<div style=”bgTop”></div>
<div style=”bgCenter”>
文字文字文字文字文字文字
</div>
<div style=”bgBottom”></div>
</div>

• 上下端の画像の背景を透明にする必要があります。
• 上下端の画像サイズは、幅100px、高さ10pxです。