CSS
배경

소개

통사론

• 배경색 : 색상 | 투명 | 초기 | 상속하다;
• background-image : url | 없음 | 초기 | 상속하다;
• 배경 위치 : 값;
• background-size : <bg-size> [<bg-size>]
• <bg-size> : 자동 | 길이 | 표지 | 포함 | 초기 | 상속하다;
• 배경 반복 : 반복 | 반복 -x | 반복 -y | 반복 없음 | 초기 | 상속하다;
• background-origin : 패딩 상자 | border-box | 내용 상자 | 초기 | 상속하다;
• background-clip : 테두리 상자 | 패딩 박스 | 내용 상자 | 초기 | 상속하다;
• background-attachment : 스크롤 | 고정 | 지역 | 초기 | 상속하다;
• 배경 : bg-color bg-image 위치 / bg-size bg-repeat bg-origin bg-clip bg-attachment 초기 | 상속하다;

비고

배경색

background-color 속성은 색상 값을 사용하거나 transparent , inherit 또는 initial 와 같은 키워드를 사용하여 요소의 배경색을 설정합니다.

• 투명 , 배경색이 투명해야 함을 지정합니다. 이것이 기본값입니다.

• 상속 하면 부모 요소에서이 속성을 상속받습니다.

• initial :이 속성을 기본값으로 설정합니다.

이것은 모든 요소와 ::first-letter / ::first-line 의사 요소에 적용 할 수 있습니다.

CSS의 색상은 다른 방법 으로 지정할 수 있습니다.

색상 이름

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• 위에서 사용 된 예제는 CSS가 단일 색상을 표현해야하는 몇 가지 방법 중 하나입니다.

16 진수 색상 코드

16 진 코드는 16 진수 16 진수 표기법으로 색상의 RGB 구성 요소를 나타내는 데 사용됩니다. 예를 들어, # ff0000은 밝은 빨간색으로, 색상의 빨간색 구성 요소는 256 비트 (ff)이고 색상의 녹색 및 파란색 부분은 0 (00)입니다.

3 개의 RGB 쌍 (R, G 및 B) 각각의 두 값이 동일하면 색상 코드를 3 자 (각 쌍의 첫 번째 숫자)로 줄일 수 있습니다. #ff0000 은 #f00 , #ffffff 는 #fff 로 #fff 수 있습니다.

16 진수 표기법은 대소 문자를 구분하지 않습니다.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

색상을 선언하는 또 다른 방법은 RGB 또는 RGBa를 사용하는 것입니다.

RGB는 Red, Green 및 Blue의 약자로, 빨간색, 녹색 및 파란색에 대한 십진수 색상 값에 해당하는 대괄호 사이에 0에서 255 사이의 세 가지 개별 값이 필요합니다.

RGBa에서는 0.0과 1.0 사이의 알파 매개 변수를 추가하여 불투명도를 정의 할 수 있습니다.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

색상을 선언하는 또 다른 방법은 HSL 또는 HSLa를 사용하는 것이며 RGB 및 RGBa와 유사합니다.

HSL은 색조, 채도 및 밝기를 나타내며 HLS라고도합니다.

• 색조는 색상환의 정도입니다 (0에서 360까지).
• 채도는 0 %에서 100 % 사이의 백분율입니다.
• 밝기도 0 %에서 100 % 사이의 백분율입니다.

HSLa를 사용하면 0.0과 1.0 사이의 알파 매개 변수를 추가하여 불투명도를 정의 할 수 있습니다.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

배경 이미지와의 상호 작용

다음 내용은 모두 동일합니다.

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

이미지의 일부가 투명하거나 이미지가 표시되지 않는 빨간색 색상이 이미지 밑에 표시됩니다 ( background-repeat 의 결과로 표시됨).

다음은 동일하지 않습니다.

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

여기서 background 의 값은 background background-image 보다 우선합니다.

background 속성에 대한 자세한 내용은 배경 약어를 참조하십시오.

배경 이미지

background-image 속성은 일치하는 모든 요소에 적용 할 배경 이미지를 지정하는 데 사용됩니다. 기본적으로이 이미지는 여백을 제외하고 전체 요소를 포함하도록 바둑판 식으로 배열됩니다.

.myClass {
  background-image: url('/path/to/image.jpg');
}

여러 이미지를 background-image 이미지로 사용하려면 쉼표로 구분 된 url() 정의하십시오.

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

이미지는 순서에 따라 다른 이미지 위에 첫 번째로 선언 된 이미지와 함께 스택됩니다.

배경 이미지를위한 CSS 추가

이 속성은 매우 유용하고 거의 필수적입니다.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

배경 기울기

그라데이션은 CSS3에서 추가 된 새로운 이미지 유형입니다. 이미지로 그라디언트는 background-image 속성 또는 background 축약 형으로 설정됩니다.

선형 및 방사형의 두 가지 유형의 그래디언트 함수가 있습니다. 각 유형에는 반복되지 않는 변형과 반복되는 변형이 있습니다.

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

선형 - 그래디언트 ()

linear-gradient 의 구문은 다음과 같습니다.

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

예를 들어, 오른쪽에서 시작하여 빨간색에서 파란색으로 전환되는 선형 그래디언트를 만듭니다.

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

수평 및 수직 시작 위치를 모두 선언하여 diagonal 그라디언트를 만들 수 있습니다.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

쉼표로 구분하여 그라데이션에 원하는 수의 색상 정지 점을 지정할 수 있습니다. 다음 예제는 8 색 정지 점을 가진 그라디언트를 만듭니다.

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

방사형 그라디언트 ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

그라디언트 반복

그래디언트 함수를 반복하면 위의 예제와 같은 인수가 사용되지만 요소의 배경에 그래디언트가 적용됩니다.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

색상 이름 대신 HEX, RGB, RGBa, HSL 및 HSLa 색상 코드를 사용할 수 있습니다. 색상 이름은 설명을 위해 사용되었습니다. 또한 방사형 그라디언트 구문은 선형 그라디언트보다 훨씬 복잡하며 단순화 된 버전이 여기에 표시됩니다. 자세한 설명과 사양은 MDN 문서를 참조하십시오.

배경 약자

background 속성은 하나 이상의 배경 관련 속성을 설정하는 데 사용할 수 있습니다.

값의 순서는 중요하지 않으며 모든 값은 선택 사항입니다.

통사론

백그라운드 속기 선언의 구문은 다음과 같습니다.

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

예제들

background: red;

red 값 background-color 을 설정하기 만하면됩니다.

background: border-box red;

background-clip 을 테두리 상자로 설정하고 background-color 을 빨간색으로 설정합니다.

background: no-repeat center url("somepng.jpg");

background-repeat 을 background-repeat 하지 않음, background-origin 중심을 중심으로, background-image 를 background-image 로 설정합니다.

background: url('pattern.png') green;

이 예제에서 요소의 background-color 은 green 로 pattern.png 로 설정되고, 사용 가능한 경우 색상에 겹쳐서 요소를 채우기 위해 필요한만큼 반복됩니다. pattern.png 투명도가 포함되어 있으면 그 뒤에 green 색상이 표시됩니다.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

이 예제에서는 이미지 위에 'picture.png'라는 검은 색 배경이 있고 이미지는 어느 축에서도 반복되지 않고 왼쪽 상단 모서리에 위치합니다. / 뒤에는 배경 이미지의 크기를 포함 할 수 있어야합니다.이 경우 배경 이미지의 크기는 600px 너비로 설정하고 높이는 auto로 설정할 수 있습니다. 이 예제는 단색으로 희미해질 수있는 피처 이미지와 잘 작동 할 수 있습니다.

참고 : 속기 백그라운드 속성을 사용하면 값을 지정하지 않아도 이전에 설정된 모든 배경 속성 값이 재설정됩니다. 이전에 설정 한 배경 특성 값만 수정하려면 longhand 특성을 대신 사용하십시오.

배경 위치

background-position 속성은 배경 이미지 나 그라디언트의 시작 위치를 지정하는 데 사용됩니다

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

위치는 X 와 Y 좌표를 사용하여 설정되며 CSS 내에서 사용되는 단위 중 하나를 사용하여 설정됩니다.

CSS의 단위는 다른 방법으로 지정할 수 있습니다 ( 여기 참조).

외장 배경 위치 속성

위의 속기 속성 외에도 배경 배경 속성 background-position-x 및 background-position-y 있습니다. 이를 통해 x 또는 y 위치를 개별적으로 제어 할 수 있습니다.

참고 : 이 기능은 Firefox (버전 31-48) 2를 제외한 모든 브라우저에서 지원됩니다. 2016 년 9 월에 발표 될 Firefox 49 는 이러한 속성 을 지원합니다. 그때까지, 스택 오버플로 (Stack Overflow) 대답에는 파이어 폭스 해킹이 있습니다.

배경 첨부

background-attachment 속성은 배경 이미지가 고정되어 있는지 또는 나머지 페이지와 함께 스크롤되는지를 설정합니다.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

예제들

배경 부착 : 스크롤

기본 동작은 본문을 스크롤 할 때 배경이 함께 스크롤됩니다.

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

배경 부착 : 고정

배경 이미지는 고정되어 몸체가 스크롤 될 때 움직이지 않습니다 :

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

배경 부착 : 지역

div의 내용이 스크롤되면 div의 배경 이미지가 스크롤됩니다.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

백그라운드 반복

background-repeat 속성은 배경 이미지가 반복되는 경우 / 방법을 설정합니다.

기본적으로 배경 이미지는 세로 및 가로로 반복됩니다.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

다음은 background-repeat: repeat-y 모습입니다.

불투명도가있는 배경색

요소에 opacity 를 설정하면 모든 자식 요소에 영향을 미칩니다. 요소의 배경에만 불투명도를 설정하려면 RGBA 색상을 사용해야합니다. 다음 예제는 0.6 불투명도의 검은 색 배경을 갖습니다.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

다중 배경 이미지

CSS3에서는 동일한 요소에 여러 배경을 쌓을 수 있습니다.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

이미지는 상단의 첫 번째 배경과 후면의 마지막 배경으로 서로 겹치게됩니다. img_1 이 맨 위에 있고 img_2 와 img_3 이 맨 아래에 있습니다.

우리는 이것에 백그라운드 축약 속성을 사용할 수도 있습니다 :

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

이미지와 그라디언트를 쌓을 수도 있습니다.

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• 데모

배경 출처 속성

background-origin 속성은 배경 이미지의 위치를 ​​지정합니다.

참고 : background-attachment 속성이 fixed 로 설정된 경우이 속성은 아무 효과가 없습니다.

기본값 : padding-box

가능한 값 :

• padding-box - 위치는 패딩 상자를 기준으로합니다.
• border-box - 위치는 테두리 상자를 기준으로합니다.
• content-box - 위치는 내용 상자에 상대적입니다.
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

결과:

더:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

배경 클립

정의 및 사용 : background-clip 속성은 background-clip 의 그림 영역을 지정합니다.

기본값 : border-box

값

• border-box 가 기본값입니다. 이렇게하면 배경이 요소 테두리의 바깥 쪽 가장자리까지 펼쳐질 수 있습니다.
• padding-box 는 요소의 패딩 바깥 쪽 가장자리에있는 배경을 잘라내어 테두리 안으로 확장시키지 않습니다.
• content-box 는 내용 상자의 가장자리에있는 배경을 잘립니다.
• inherit 은 선택한 요소에 부모 설정을 적용합니다.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

배경 크기

일반 개요

background-size 속성을 사용하면 background-image 의 크기 조절을 제어 할 수 있습니다. 크기를 결정하는 데는 최대 2 개의 값이 필요하며, 결과 이미지의 수직 / 수평 방향 크기 / 크기를 결정합니다. 속성이 누락 된 경우, width 와 height 가 모두 auto 으로 간주됩니다.

auto 는 이미지의 종횡비를 결정할 수있는 경우이를 유지합니다. 높이는 선택 사항이며 auto 으로 간주 될 수 있습니다. 따라서 256px × 256px 이미지에서 다음 background-size 설정은 높이와 너비가 모두 50 픽셀 인 이미지를 생성합니다.

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

따라서 다음 그림 (256px x 256px의 언급 된 크기)으로 시작한다면,

우리 요소의 배경에 포함 된 사용자 화면에 50 픽셀 x 50 픽셀로 끝납니다.

백분율 값을 사용하여 요소와 관련하여 이미지의 크기를 조정할 수도 있습니다. 다음 예제는 200 픽셀 x 133 픽셀의 이미지를 생성합니다.

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

이 동작은 background-origin 에 따라 다릅니다.

종횡비 유지

previos 섹션의 마지막 예제는 원래의 종횡비를 잃어 버렸습니다. 원은 타원, 직사각형은 정사각형, 삼각형은 다른 삼각형이됩니다.

길이 또는 백분율 접근법은 항상 종횡비를 유지할만큼 충분히 유연하지 않습니다. auto 은 도움이되지 않습니다. 왜냐하면 어떤 요소의 크기가 더 커질 지 모르기 때문입니다. 그러나 특정 영역을 이미지로 (그리고 정확한 종횡비) 완전히 커버하거나 올바른 종횡비 이미지를 배경 영역에 완전히 contain 하려면 값, contain 및 cover 가 추가 기능을 제공합니다.

contain 과 cover 대한 계란 설명

나쁜 말투에 유감스럽게 생각하지만 Biswarup Ganguly가 오늘 의 사진 을 데모로 사용하려고합니다. 이것이 귀하의 화면이고, 회색 영역이 보이는 화면 밖에 있다고 가정 해 보겠습니다. 데모를 위해 우리는 16 × 9 비율을 가정 할 것입니다.

우리는 앞서 언급 한 그날의 그림을 배경으로 사용하기를 원합니다. 그러나 우리는 어떤 이유로 이미지를 4x3 크기로 자릅니다. background-size 속성을 고정 길이로 설정할 수 있지만 contain 및 cover 에만 초점을 맞 춥니 다. 나는 또한 우리가 body 의 너비 및 / 또는 높이를 조작하지 않았다고 가정한다.

contain

contain

고유 한 종횡비 (있는 경우)를 유지하면서 이미지의 크기와 너비가 배경 위치 지정 영역 내부에 들어갈 수 있도록 최대 크기로 이미지의 크기를 조정합니다.

이렇게하면 배경 이미지가 항상 배경 위치 영역에 완전히 포함되지만,이 경우 background-color 으로 채워진 빈 공간이있을 수 있습니다.

cover

cover

고유 한 종횡비 (있는 경우)를 유지하면서 이미지의 너비와 높이가 모두 배경 위치 지정 영역을 완전히 덮을 수 있도록 이미지의 크기를 조정합니다.

이렇게하면 배경 이미지가 모든 것을 덮고 있는지 확인할 수 있습니다. 눈에 보이는 background-color 은 없지만 화면의 비율에 따라 이미지의 상당 부분이 잘릴 수 있습니다.

실제 코드 데모

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

background-blend-mode 속성

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

결과보기 : https://jsfiddle.net/MadalinaTn/y69d28Lb/

CSS 구문 : background-blend-mode : normal | 곱하기 | 화면 | 오버레이 | 어둡게 | 밝게하다 | 컬러 닷지 | 채도 | 색상 | 밝기;