CSS3.0の各種修飾 - background
・背景色
・背景図(繰り返し、位置)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>background</title> <style type="text/css"> div{ border:1px solid #000; height: 70px; width: 200px; } </style> </head> <body> <!-- 背景色 --> background-color:#aaa <div style="background-color:#aaa;height:40px;">テスト文字</div> <!-- 背景図 --> background-image:url(snow.gif) <div style="background-image:url(snow.gif);">テスト文字</div> <!-- 背景図:繰り返し --> background-image:url(snow.gif);background-repeat: no-repeat <div style="background-image:url(snow.gif); background-repeat:no-repeat;">テスト文字</div> <!-- 背景図:一行繰り返す --> background-image:url(logo.gif);background-repeat: repeat-x <div style="background-image:url(snow.gif); background-repeat:repeat-x;">テスト文字</div> <!-- 背景図:繰り返しなし --> background-image:url(snow.gif);background-repeat:no-repeat; background-position: 35% 80%; <div style="background-image:url(snow.gif);background-repeat: no-repeat;background-position:35% 80%;">テスト文字</div> <!-- 背景図:繰り返しなし、位置指定 --> background-image:url(snow.gif);background-repeat:no-repeat; background-position: 30px 12px; <div style="background-image:url(snow.gif);background-repeat: no-repeat;background-position:30px 8px;">テスト文字</div> <!-- 背景図:繰り返しなし、位置指定 --> background-image:url(snow.gif);background-repeat:no-repeat; background-position: center bottom; <div style="background-image:url(snow.gif);background-repeat: no-repeat;background-position:center bottom;">テスト文字</div> </body> </html>
・background-clip : 背景が適用する範囲(content,padding,border,margin)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>background-clip</title> <style type="text/css"> div{ border:15px dotted #444; padding: 12px; height: 30px; width: 200px; font-weight: bold; } </style> </head> <body> background-image:url(snow.gif) <div style="background-image:url(snow.gif);">テスト文字</div> background-image:url(snow.gif);background-clip:no-clip; <div style="background-image:url(snow.gif); background-clip:no-clip;">テスト文字</div> background-image:url(snow.gif);background-clip:padding-box; <div style="background-image:url(snow.gif); background-clip:padding-box;">テスト文字</div> background-image:url(snow.gif);background-clip:content-box; <div style="background-image:url(snow.gif); background-clip:content-box;">テスト文字</div> </body> </html>
・background-origin : 背景が適用開始する位置
FireFoxが未対応だった。
- border-box
- padding-box
- content-box
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>background-origin</title> <style type="text/css"> div{ border:10px dotted #444; padding: 12px; height: 30px; width: 200px; } </style> </head> <body> background-image:url(snow.gif);background-origin:content; <div style="background-image:url(snow.gif);background-origin:content; -webkit-background-origin:content;background-repeat:no-repeat;">テスト文字</div> background-image:url(snow.gif);background-origin:padding; <div style="background-image:url(snow.gif);background-origin:padding; -webkit-background-origin:padding;background-repeat:no-repeat;">テスト文字</div> background-image:url(snow.gif);background-origin:border; <div style="background-image:url(snow.gif);background-origin:border; -webkit-background-origin:border;background-repeat:no-repeat;">テスト文字</div> </body> </html>
・background-size : 背景図に使用するリソースのサイズを指定する
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>background-size</title> <style type="text/css"> div{ border:1px solid #000; height: 50px; width: 200px; } </style> </head> <body> background-image:url(snow.gif) <div style="background-image:url(snow.gif);"></div> background-image:url(snow.gif);background-size:100% 80%;<br> <div style="background-image:url(snow.gif); -webkit-background-size:100% 80%;background-size:100% 80%;"></div> background-image:url(snow.gif);background-size:20% auto;<br> <div style="background-image:url(snow.gif); -webkit-background-size:20% auto;background-size:20% auto;"></div> background-image:url(snow.gif);background-size:auto 50%;<br> <div style="background-image:url(snow.gif); -webkit-background-size:auto 50%;background-size:auto 50%;"></div> background-image:url(snow.gif);;background-size:60px 30px;<br> <div style="background-image:url(snow.gif); -webkit-background-size:60px 30px;background-size:60px 30px;"></div> background-image:url(snow.gif);background-size:40px auto;<br> <div style="background-image:url(snow.gif); -webkit-background-size:40px auto;background-size:40px auto;"></div> background-image:url(snow.gif);background-size:auto 50%;<br> <div style="background-image:url(snow.gif); -webkit-background-size:auto 20px;background-size:auto 20px;"></div> </body> </html>
・background-origin : 複数の背景図を指定する
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>複数背景図使用</title> <style type="text/css"> div#div1{ border:1px solid #000; height: 160px; width: 500px; /* CSS3.0から複数の背景図使用できる */ background-image: url(logo.jpg), url(snow.gif), url(face.gif); /* それぞれの繰り返し指定 */ background-repeat: repeat-y, repeat-x, repeat; /* それぞれを位置指定 */ background-position: center top, left center, left top; } </style> </head> <body> <div id="div1"></div> </body> </html>