logo

CSS에 배경 이미지를 추가하는 방법은 무엇입니까?

그만큼 배경 이미지 CSS의 속성은 이미지를 요소의 배경으로 설정하는 데 사용됩니다. 이 CSS 속성을 사용하면 요소에 대해 하나 이상의 배경 이미지를 설정할 수 있습니다.

기본적으로 이미지는 요소의 왼쪽 상단에 위치하며 가로 및 세로로 반복됩니다. 배경 이미지는 텍스트 색상에 따라 선택해야 합니다. 텍스트와 배경 이미지의 잘못된 조합으로 인해 웹페이지가 제대로 디자인되지 않고 가독성이 떨어지는 원인이 될 수 있습니다.

그만큼 URL() 이 속성의 값을 사용하면 모든 이미지에 대한 파일 경로를 포함할 수 있습니다. 요소의 배경이 표시됩니다. 배경에는 여러 이미지를 사용하거나 그라디언트와 이미지를 혼합하여 사용할 수 있습니다. 배경 이미지가 로드되지 않거나 그라데이션을 사용하고 있지만 해당 브라우저에서 지원되지 않는 경우 대체 값(대체로 사용되는 값)을 요소의 배경색으로 사용할 수 있습니다.

스위치 자바

통사론

 background-image: url(); 

가치

URL(): 이미지의 URL입니다. 두 개 이상의 이미지를 지정하려면 URL을 쉼표로 구분하면 됩니다.

np 패딩

 body { background-image: url('cat.webp'); background-color: lightgray; } 
지금 테스트해보세요

산출

CSS에 배경 이미지를 추가하는 방법

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
지금 테스트해보세요

산출

CSS에 배경 이미지를 추가하는 방법

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
지금 테스트해보세요

산출

CSS에 배경 이미지를 추가하는 방법