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>

Reference

この問題について(CSS3 - Background), 我々は、より多くの情報をここで見つけました https://velog.io/@sora2821/CSS3-Background

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Angular開発実践(四):コンポーネント間のインタラクション

Rails 6 Grapeを利用したAPI作成、Swaggerでの確認