[CSS] 03. 배경 및 이미지 관련 스타일

background-color

요소의 배경 색을 설정

하나의 <color> 값을 사용해 설정 

 

background-image

요소의 배경 이미지를 설정

배경이미지가 적으면 기본적으로 반복

배경은 마우스 우측을 누르면 다운로드가 되지 않음

.bg1 { background-image: url("bg1.png"); }

 

background - repeat

단축형 

배경 이미지를 어떻게 반복할지를 설정

background으로 no-repeat 사용 가능 

배경 두 개 사용 가능

.bg1 { background-image: url("bg1.png"); }
.bg2 {background-image: url("bg1.png"); background-repeat: repeat-x; }
.bg3 {background-image: url("bg1.png"); background-repeat: no-repeat; }
.bg4 { background-image: url("bg1.png"); background-repeat: no-repeat; background-position: right center };

 

background

.bg1 { background: url("bg1.png") no-repeat;}
.bg2 { background: url("bg1.png") no-repeat, url("bg2.png") }
.bg3 { background: url("bg3.png") no-repeat left top,
	url("bg3.png") no-repeat right top, 
	url("bg3.png") no-repeat left bottom,
	url("bg3.png") no-repeat right bottom;}

background 속성을 사용하면 세부적인 속성을 한꺼번에 사용 가능

background-color(배경 색)

background-image(배경 이미지)

background-repeat(배경 이미지 반복 여부)

background-position(배경 이미치 위치)

 

 

그라데이션 (Gradation)

선형 그라데이션(linear-gradient)

.box1 { background: linear-gradient( to bottom, yellow, red); }
.box2 { background: linear-gradient( to top, yellow, red); }
.box3 { background: linear-gradient( to right, yellow, red); }
.box4 { background: linear-gradient( to left, yellow, red); }
.box5 { background: linear-gradient( 45deg, yellow, red); }
.box6 { background: linear-gradient( 135deg, yellow 12%, blue 12%, green 70%, red 94%, tomato 100%); }

box6 처럼 각도를 지정해 그라데이션을 넣는 방법도 가능함 

 

 

방사형 그레이디언트(Radial Gradient)

원점에서 발산되는 두 개 이상의 색상 사이에서 점진적인 전환으로 구성된 원 모양 또는 타원 모양의 이미지를 만듦

.box { 
	width: 400px;
	height: 400px;
	margin-bottom: 20px;
	background: radial-gradient(yellow, red, brown); 
}