이 학습 가이드는 CSS와 함께 배경 이미지를 사용하는 방법을 보여줍니다. 자, 시작하겠습니다!
CSS로 여러 배경 이미지를 활용하는 방법?
CSS ' 배경 ” 속성은 background, background-attachment, clip, image, repeat, origin, size, position 속성을 포함하는 단축 속성입니다. background 속성은 여러 이미지의 URL을 지정하는 데 사용할 수 있습니다. 그런 다음 해당 이미지를 적절하게 배치하고 설정합니다.
하나의 div 요소에는 웹 페이지 로고로 하나의 이미지만 포함되어 있고 두 번째 요소에는 세 개의 이미지가 포함되어 있는 예를 들어 보겠습니다.
예: CSS로 여러 배경 이미지 추가
HTML에서 로고에 대한 div 요소를 추가하고 클래스 이름을 지정합니다. 예를 들어 ' 심벌 마크 '. 두 번째 div는 여러 이미지를 사용하므로 이름을 ' 다중 이미지 '. 그러나 기본 설정에 따라 클래스 이름을 지정할 수 있습니다.
HTML
< 사업부 수업 = '심벌 마크' >< / 사업부 >< 사업부 수업 = '여러 이미지' >< / 사업부 >
다음 섹션에서는 CSS background 속성을 사용하여 이미지를 조정합니다.
스타일 '로고' div
.심벌 마크 {너비 : 100% ;
키 : 50픽셀 ;
심 : 5px ;
여유 : 5px ;
배경 크기 : 100픽셀 ;
배경 반복 : 반복하지 않는 ;
배경 이미지 : URL ( 이미지/linux-logo.png ) ;
}
' 클래스가 있는 div 요소 심벌 마크 ”는 다음 속성과 함께 적용됩니다.
- “ 너비 ” 속성은 요소의 너비를 “ 100% '.
- “ 키 ” 속성은 요소의 높이를 “ 50픽셀 '.
- “ 심 ” 속성은 “ 5px ” 요소의 지정된 콘텐츠 주위에 공백이 있습니다.
- “ 여유 ” 속성은 “ 5px ” 요소 주변의 공간.
- “ 배경 크기 ” 속성은 요소의 배경 이미지 크기를 “ 100픽셀 '.
- “ 배경 반복 ” 값으로 “ 반복하지 않는 ”는 배경을 한 번만 표시합니다.
- “ 배경 이미지 ” 속성은 이미지의 URL을 지정하는 데 사용됩니다.
스타일 '여러 이미지' div
.여러 이미지 {너비 : 90% ;
키 : 45vh ;
여유 : 1px 자동 ;
심 : 20픽셀 ;
배경 크기 : 150픽셀 ;
배경색 : RGB ( 157 , 154 , 151 ) ;
배경 이미지 : URL ( 이미지/office.png ) , URL ( 이미지/html.png ) , URL ( 이미지/laptop.png ) ;
배경 반복 : 반복하지 않는 , 반복하지 않는 , 반복하지 않는 ;
배경 위치 : 왼쪽 , 센터 , 오른쪽 ;
}
이제 다음과 같이 다른 컨테이너의 스타일을 지정합니다.
- “ 배경색 ” 속성은 요소의 배경색을 지정합니다.
- “ 배경 이미지 ” 속성은 여러 이미지 URL을 지정합니다.
- “ 배경 반복 ” 속성은 background-image 속성에 지정된 이미지 시퀀스의 이미지 값을 설정합니다. 두 이미지 모두 반복되지 않도록 설정되어 브라우저에 한 번만 표시됩니다.
- “ 배경 위치 ”는 background-image 속성으로 지정된 이미지 순서에서 이미지 위치를 조정합니다. 첫 번째 이미지는 왼쪽에, 두 번째 이미지는 중앙에, 세 번째 이미지는 오른쪽에 배치됩니다.
위에 제공된 코드를 제공하면 브라우저의 결과는 다음과 같습니다.
이런 식으로 CSS로 여러 이미지의 위치를 조정할 수 있습니다.
결론
응용 프로그램을 재미있고 대화식으로 만들기 위해 개발자는 다양한 이미지와 색상을 사용합니다. background-position, background-repeat, background-size 등과 같은 CSS 배경 속성으로 여러 이미지를 설정할 수 있습니다. 이 설명서는 CSS 예제와 함께 여러 배경 이미지의 사용법을 보여줍니다.