スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

枠や影をつける画像とつけない画像を貼り分ける

たまにこの画像には枠や背景をつけたいと思う時があったとしたら、
cssを使って同一のページ内に貼り分けることが出来るそうです。
1、枠と影付き背景をつける
画像

これに対し
2、背景をつけない場合は


先ずスタイルシートには

div.phot { 
margin: 0px 0px 5px 5px;
background: url(背景画像のアドレス) right bottom;
float: left;
}
div.img {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #FFFFF0;
border: 1px solid #999999;
}

画像を貼り付けるところは
1、枠と背景画像をつける

<div class="phot"><div class="img"><img src="画像のアドレス" alt="画像の説明"></div></div>

2、枠なし画像は

<img src="画像のアドレス" alt="画像の説明">



ちなみに背景画像はこれ↓(縮小表示しています)
2011-1kage.jpg
枠や影をつける画像とつけない画像を貼り分ける/2011/01/27 00:18/[html] html/ トラックバック(0)/ comment(0)

comment

投稿















管理者にだけ表示を許可する

trackback

trackback url ↓

http://dreamy.blog2.fc2.com/tb.php/181-0138d0a0


| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。