liguofeng29’s blog

個人勉強用ブログだっす。

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>

f:id:liguofeng29:20160131165147p:plain

・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>

f:id:liguofeng29:20160131165753p:plain

・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>

f:id:liguofeng29:20160131170506p:plain

・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>

f:id:liguofeng29:20160131171136p:plain

・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>

f:id:liguofeng29:20160131171551p:plain