<frontend> {07} </이미지 그라데이션 및 배경 꾸미기>

이미지 그라데이션 및 배경 꾸미기

• 배경색과 배경범위 지정하기
• 배경 이미지 지정하기
• 그라데이션 효과로 배경 꾸미기 

 

 

 

---

1. 배경색과 배경 범위 지정하기

• 배경색을 지정하는 background-color 속성

background-color: #008000;

 

• 배경색 적용범위를 조절하는 background-clip 속성
  • border-box : 박스모델 최외각인 테두리까지 적용 (기본값)
  • padding-box : 박스모델 테두리 제외한 padding범위까지 적용
  • content-box : 박스모델 콘텐츠부분에만 적용

<style>
	#clip-border {background-clip: border-box;}
    #clip-content {background-clip: content-box;}
</style>
...
<div id="container">
	<div class="desc" id="clip-border">	...	</div>
    ...
</div>

 

 

 

---

2. 배경 이미지 지정하기

• 요소에 배경이미지를 넣는 background-image 속성

<style>
	body {
    	background-image: url('img/cat.png');
    }
</style>

 

• 배경이미지의 반복방법을 지정하는 background-repeat 속성
  • (repeat, repeat-x, repeat-y, no-repeat)

 

• 배경이미지의 위치를 조절하는 background-position 속성

background-position: <수평위치> <수직위치>;
수평위치: left | center | right | <백분율> | <길이 값>
수직위치: top | center | bottom | <백분율> | <길이 값>


ex) 
<style>
	ul {
    	list-style-type: none;
        margin-left: -30px;
    }
    li {
    	background-image: url('img/book_icon.png');
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 50px;
        line-height: 40px;
    }
</style>
....
<h1>아이기스 퍼블리싱</h1>
<ul>
	<li>회사소개</li>
    <li>도서</li>

 

• 배경이미지의 적용범위를 조절하는 background-origin 속성
  • centent-box, padding-box, border-box

• 배경이미지를 고정하는 background-attachment 속성
  • scroll, fixed

<style>
	body{
    	background-image: url('img/bg.png');
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
    }
    div{
    	...
    }
    
    #bg1 {background-origin: padding-box;}
	...
</style>

 

• 배경이미지 크기를 조절하는 background-size 속성
  • auto, contain, cover, <크기>, <백분율>

<style>
	.box {
    	...
        /*배경이미지를 반복하지않고 왼쪽상단에 위치*/
        background: url('img.png') no-repeat left top
    }
    #bg1 {background-size: contain;}
</style>

 

---

3. 그라데이션 효과로 배경 꾸미기

• 선형 그라데이션

linear-gradient(to <방향>또는<각도>, <색상 중지점>, [<색상 중지점>, ...]);


ex)
	.grad {
    	background: blue;
        background: linear-gradient(to right bottom, blue, white);
    }
    .grad1{
    	background: red;
        background: linear-gradient(45deg, #f00, #fff) /*빨간색에서 흰색으로*/
    }
</style>

 

• 원형 그라데이션

radial-grdient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ...]);


ex)
<style>
	.grad1 {
    	background: red;
        background: radial-gradient(white, yellow, red);
        /*모양을 지정하지 않으면 타원형이 기본값*/
    }
    .grad2{
    	background: red;
        background: radial-gradient(circle, white, yellow, red);
    }
</style>