CSS3 - Background

35912 ワード

1. Background-image

  • 番組において背景画像
  • を指定する.
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
          	background-image: url("http://poiemaweb.com/img/bg/dot.png");
          }
        </style>
      </head>
      <body>
        <h3>Background image</h3>
      </body>
    </html>

    2. background-repeat


  • 背景画像の繰り返しを指定

  • 垂直、水平または水平の繰り返しを指定できます.

  • background-repeat:repeat(デフォルト);
    -設定された画像が画面より小さい場合、画像は自動的に繰り返し出力されます.

  • background-repeat: repeat-x;
    -x軸のみで背景画像を繰り返します.

  • background-repeat: repeat-y;
    -y軸のみで背景画像を繰り返す
  • <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
          	background-image: url("http://poiemaweb.com/img/bg/dot.png");
          	background-repeat: repeat-x;
          }
        </style>
      </head>
      <body>
        <h3>Background-repeat: repeat-x;</h3>
      </body>
    </html>
  • の繰り返し出力を停止する場合は、次の操作を行います.
    background-repeat: no-repeat;
  • <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
          	background-image: url("http://poiemaweb.com/img/bg/dot.png");
          	background-repeat: no-repeat;
          }
        </style>
      </head>
      <body>
        <h3>Background-repeat: no-repeat;</h3>
      </body>
    </html>
  • 背景-画像に複数の画像が設定と、最初に設定画像が前の
  • に出力される.
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
          	background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/paper.gif");
          	background-repeat: no-repeat, repeat;
          }
        </style>
      </head>
      <body>
        <h3>Background-repeat: no-repeat, repeat;</h3>
      </body>
    </html>

    3. background-size


  • 背景画像のサイズを指定

  • 背景画像の一意のスケールが保持されているため、設定によっては画像の一部が表示されない場合があります.

  • 属性値はpx、%、cover、containsなどを使用します

  • 背景画像の幅と高さを設定できます
  • 最初の値はwidth、2番目の値はhight
  • を表す.
  • の値が1つしか指定されていない場合、指定された値は幅を表し、高さはautoです.
  • width、heightはスペースで区切らなければならない(他の背景画像と識別できる幅値をカンマで区切る)
  • px値の指定
    -背景画像のサイズを指定したpx値で設定
    -1番目の値はwidth、2番目の値はheight、
  • .bg {
    	background-size: 700px 500px;
    }
  • %の値を指定
    -背景画像のサイズを指定した%値で設定
    -1番目の値はwidth、2番目の値はheight、
  • .bg {
    	background-size: 100% 100%;
    }
    指定
  • カバー
    -背景画像のスケールを保持する場合は、親要素の幅、高さの大きい値に背景画像を調整します.
    -画像の一部が表示されない場合があります.
    .bg {
    	background-size: cover;
    }
    指定は
  • を含む
    -
  • 、親要素の領域に背景画像が見えない部分がないように画像のスケーリングを調整し、領域全体が背景画像を収容できるようにします.
    .bg {
    	background-size: contain;
    }

    4. background-attachment

  • 通常画面をスクロールする場合、背景画像も
  • スクロールする.
  • 画面をスクロールするときに背景画像をスクロールしない場合は、背景-添付ファイル:固定
  • を指定します.
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          *, *:after, *:before {
          	margin: 0;
          	padding: 0;
          	box-sizing: border-box;
          }
          
          html, body {
          	width: 100%;
          	height: 100%;
          }
          
          .bg-wrap {
          	/* bg-wrap이 page-wrap보다 작은 경우, page-wrap이 가리는 문제 해결*/
          	min-height: 600px;
          	height: 100%;
          	background-size: cover;
          	background-position: center;
          	background-repeat: no-repeat;
          	overflow: auto;
          	/*or margin: 0.1px; */
          }
          
          .parallax {
          	background-image: url("http://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
          	/* parallax scrolling effect */
          	background-attachment: fixed;
          }
          
          .normal {
          	background-image: url("http://poiemaweb.com/img/bg/stock-photo-155153867.jpg");
          }
          
          #page-wrap {
          	width: 400px;
          	/* 마진 상쇄 발생 */
          	margin: 50px auto;
          	padding: 30px;
          	background: white;
          	box-shadow: 0 0 20px black;
          	/* size/line-height | family */
          	font: 15px/2 Georgia, Serif;
          }
        </style>
      </head>
      <body>
        <div class="bg-wrap parallax">
          <div id="page-wrap">
            <p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
            <p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
            <p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
          </div>
        </div>
        <div class="bg-wrap normal"></div>
      </body>
    </html>

    5. background-position


  • 通常、backgroon-imageは左上から画像を出力し、backgroon-positionを使用して画像の座標(xps、ypos)を指定できます.

  • background-position:0%(デフォルト);
    背景画像を右上に表示
  • <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
          	margin: 0px;
          }
          
          div {
            background-image: url("http://poiemaweb.com/img/bg/dot.png");
            background-color: #FFEE99;
            background-repeat: no-repeat;
            width: 32vw;
            height: 200px;
            margin-bottom: 2vw;
            float: left;
          }
          
          div:not(:nth-of-type(3n+1)) {
          	margin-left: 2vw;
          }
          
          .example1 {
          	background-position: top;
          }
          .example2 {
          	background-position: bottom;
          }
          .example3 {
          	background-position: center;
          }
          .example4 {
          	background-position: left;
          }
          .example5 {
          	background-position: right;
          }
          .example6 {
          	/* percentage values */
          	background-position: 25% 75%;
          }
          .example7 {
          	/* length values
          		xpos ypos */
          	background-position: 10px 20px;
          }
          .example8 {
          	background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/dot.png");
          	background-position: 0px 0px, center;
          }
        </style>
      </head>
      <body>
        <div>default(0% 0%)</div>
        <div class="example1">top</div>
        <div class="example2">bottom</div>
        <div class="example3">center</div>
        <div class="example4">left</div>
        <div class="example5">right</div>
        <div class="example6">25% 75%</div>
        <div class="example7">10px 20px</div>
        <div class="example8">0px 0px, center</div>
      </body>
    </html>

    6. background-color

  • 背景-color:要素の背景色、色値、または透明キー
  • を指定します.
    .bg-col-white {
    	background-color: rgb(255, 255, 255);
    }
    
    bg-col-red {
    	background-color: red;
    }

    7. background Shorthand

  • 背景スケッチ:Syntax
  • 、背景-色、背景-画像、背景-繰り返し、背景-位置を一度に定義
    background: color || image || repeat || attachment || position
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          div {
          	/* background: color || image || repeat || attachment || position */
          	background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
          	width: 50vw;
          	height: 300px;
          }
        </style>
      </head>
      <body>
        <div></div>
      </body>
    </html>