HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상
그림 물감 RGB 마녀 HSL
CSS 배경
배경색 배경 이미지 배경 반복 배경 첨부 배경 속기
CSS 테두리
테두리 테두리 너비 테두리 색상 테두리 측면 국경 속기 둥근 테두리
CSS 여백
Margins Margin Collapse
CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS 텍스트
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS 글꼴
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트
Float Clear Float Examples
CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음
Navbar Vertical Navbar Horizontal Navbar
CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트
Linear Gradients Radial Gradients Conic Gradients
CSS 그림자
Shadow Effects Box Shadow
CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 다중 배경

❮ 이전의 다음 ❯

이 장에서는 하나의 요소에 여러 배경 이미지를 추가하는 방법을 배웁니다.

다음 속성에 대해서도 배우게 됩니다.

  • background-size
  • background-origin
  • background-clip

CSS 다중 배경

CSS를 사용하면 속성을 통해 요소에 대해 여러 배경 이미지를 추가할 수 있습니다 background-image.

서로 다른 배경 이미지는 쉼표로 구분되고 이미지는 서로 겹쳐지며 첫 번째 이미지가 뷰어에 가장 가깝습니다.

다음 예제에는 두 개의 배경 이미지가 있습니다. 첫 번째 이미지는 꽃(하단 및 오른쪽 정렬)이고 두 번째 이미지는 종이 배경(왼쪽 상단 모서리 정렬)입니다.

예시

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

개별 배경 속성(위 참조) 또는 background약식 속성을 사용하여 여러 배경 이미지를 지정할 수 있습니다.

다음 예제에서는 background약식 속성을 사용합니다(위 예제와 동일한 결과).

예시

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS 배경 크기

CSS background-size속성을 사용하면 배경 이미지의 크기를 지정할 수 있습니다.

크기는 길이, 백분율로 지정하거나 두 키워드(포함 또는 덮개) 중 하나를 사용하여 지정할 수 있습니다.

다음 예제에서는 픽셀을 사용하여 원본 이미지보다 훨씬 작게 배경 이미지의 크기를 조정합니다.

고통을 주셔서 감사합니다

고통 그 자체가 사랑이다

그렇기 때문에 우리의 정상적인 관행이 결과를 이용하기 위해 참는 가장 작은 사람이 오는 것입니다.

코드는 다음과 같습니다.

예시

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

에 대한 다른 두 가지 가능한 값 background-size은 contain 및 cover입니다.

키워드 는 contain배경 이미지를 가능한 한 크게 조정합니다(단, 너비와 높이가 모두 콘텐츠 영역 안에 맞아야 함). 이와 같이 배경 이미지와 배경 위치 지정 영역의 비율에 따라 배경 이미지에 가려지지 않은 일부 영역이 있을 수 있습니다.

cover키워드는 콘텐츠 영역이 배경 이미지로 완전히 덮이도록 배경 이미지의 크기를 조정합니다(폭과 높이 모두 콘텐츠 영역과 같거나 초과) . 따라서 배경 위치 지정 영역에서 배경 이미지의 일부가 보이지 않을 수 있습니다.

다음 예는 contain및 의 사용을 보여줍니다 cover.

예시

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

여러 배경 이미지의 크기 정의

또한 이 background-size속성은 여러 배경으로 작업할 때 배경 크기에 대해 여러 값을 허용합니다(쉼표로 구분된 목록 사용).

다음 예에는 각 이미지에 대해 서로 다른 background-size 값을 사용하여 세 개의 배경 이미지가 지정되어 있습니다.

예시

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

전체 크기 배경 이미지

이제 우리는 항상 전체 브라우저 창을 덮는 웹사이트에 배경 이미지를 갖고 싶습니다.

요구 사항은 다음과 같습니다.

  • 전체 페이지를 이미지로 채우기(공백 없음)
  • 필요에 따라 이미지 크기 조정
  • 페이지 중앙 이미지
  • 스크롤바를 일으키지 않음

다음 예제는 수행 방법을 보여줍니다. <html> 요소를 사용하십시오(<html> 요소는 항상 최소한 브라우저 창의 높이입니다). 그런 다음 고정되고 중앙에 배경을 설정합니다. 그런 다음 background-size 속성으로 크기를 조정합니다.

예시

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

영웅 이미지

<div>에서 다른 배경 속성을 사용하여 영웅 이미지(텍스트가 있는 큰 이미지)를 만들고 원하는 위치에 배치할 수도 있습니다.

예시

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

CSS background-origin 속성

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

속성은 세 가지 다른 값을 사용합니다.

  • border-box - 배경 이미지는 테두리의 왼쪽 상단에서 시작합니다.
  • padding-box - (기본값) 배경 이미지는 패딩 가장자리의 왼쪽 상단 모서리에서 시작합니다.
  • content-box - 배경 이미지는 콘텐츠의 왼쪽 상단에서 시작합니다.

다음 예제에서는 background-origin속성을 보여줍니다.

예시

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS 배경 클립 속성

CSS background-clip속성은 배경의 페인팅 영역을 지정합니다.

속성은 세 가지 다른 값을 사용합니다.

  • border-box - (기본값) 배경이 테두리의 바깥쪽 가장자리에 칠해집니다.
  • padding-box - 배경이 패딩의 바깥쪽 가장자리에 칠해집니다.
  • content-box - 배경이 콘텐츠 상자 안에 그려집니다.

다음 예제에서는 background-clip속성을 보여줍니다.

예시

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

연습으로 자신을 테스트하십시오

연습:

<body> 요소에 두 개의 배경 이미지를 추가합니다.

img1.gif그리고 img2.gif.

img2.gif가 상단에 표시 되는지 확인하십시오 img1.gif.

<style>
body {
  background-image: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS 고급 배경 속성

Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)

❮ 이전의 다음 ❯