1. background-origin : 배경 이미지의 시작점 지정
| 속성 값 | 설명 |
| border-box | 배경 이미지가 테두리의 좌측 상단 모퉁이에서 시작 |
| padding-box | 배경 이미지가 안여백의 좌측 상단 모퉁이에서 시작 (기본값) |
| content-box | 배경 이미지가 콘텐츠의 좌측 상단부터 시작 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style>
div.ori{width: 550px; padding: 25px; margin-bottom: 20px; border: 15px double rgba(0,0,0,0.6);
background: url(img/bg_origin.png) no-repeat}
div.ori1{background-origin: border-box;}
div.ori2{background-origin: padding-box;}
div.ori3{background-origin: content-box;}
</style>
</head>
<body>
<div class="ori ori1">background-origin: border-box</div>
<div class="ori ori2">background-origin: padding-box</div>
<div class="ori ori3">background-origin: content-box</div>
</body>
</html>
2. background-clip : 배경의 영역을 지정
| 속성 값 | 설명 |
| border-box | 배경이 테두리를 포함한 영역에 배치 (기본값) |
| padding-box | 배경이 테두리를 제외한 안쪽 영역에 배치 |
| content-box | 배경이 안여백을 제외한 콘텐츠 영역에만 배치 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<style>
div.clip{width: 550px; padding: 25px; margin-bottom: 20px;
border: 15px double rgba(0,0,0,0.6);
background-color: mediumpurple}
.clip1{background-clip: border-box}
.clip2{background-clip: padding-box}
.clip3{background-clip: content-box}
</style>
</head>
<body>
<div class="clip clip1">background-clip: border-box</div>
<div class="clip clip2">background-clip: padding-box</div>
<div class="clip clip3">background-clip: content-box</div>
</body>
</html>
3. gradient background : 그라디언트 색상 배경 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gradient background</title>
<style>
div{width: 500px;height: 100px; margin: 10px;
text-align: center; line-height: 100px; font-weight: bold; float: left}
.linear{background: linear-gradient(red, yellow, green)}
.linear2{background: linear-gradient(to top, red, yellow, green)}
.right{background: linear-gradient(to right, red, yellow, green)}
.left{background: linear-gradient(to left, red, yellow, green)}
.right_bottom{background: linear-gradient(to right bottom, red, yellow, green)}
.left_bottom{background: linear-gradient(to left bottom, red, yellow, green)}
.plus200{background: linear-gradient(200deg, red, yellow, green)}
.minus200{background: linear-gradient(-200deg, red, yellow, green)}
.rgba{background: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1))}
.hsla{background: linear-gradient(to right, hsla(0,100%,50%,0) 0%,hsla(0,100%,50%,1) 100%)}
.repeat{background: repeating-linear-gradient(red, yellow 10%, green 20%)}
.percent{background: linear-gradient(red 10%, yellow 70%, green 20%)}
.radial{background:radial-gradient(red, yellow, green)}
.circle{background:radial-gradient(circle, red, yellow, green)}
</style>
</head>
<body>
<div class="linear">선형 gradient의 기본형 (위→아래)</div>
<div class="linear2">선형 gradient : to top (아래→위)</div>
<div class="right">가로 방향 gradient : to right (오른쪽→왼쪽)</div>
<div class="left">가로 방향 gradient : to left (왼쪽→오른쪽)</div>
<div class="right_bottom">사선 방향 gradient : to right bottom (오른쪽 위→왼쪽 아래)</div>
<div class="left_bottom">사선 방향 gradient : to left bottom (왼쪽 위→오른쪽 아래)</div>
<div class="plus200">각도를 이용한 gradient : 200도</div>
<div class="minus200">각도를 이용한 gradient : -200도</div>
<div class="rgba">투명도 gradient : rgba</div>
<div class="hsla">투명도 gradient : hsla</div>
<div class="repeat">gradient의 반복</div>
<div class="percent">gradient 색상 영역 변경</div>
<div class="radial">원형 gradient 기본형 (타원형)</div>
<div class="circle">원형 gradient (정원형)</div>
</body>
</html>
참고 유용 사이트 : https://www.colorzilla.com/
ColorZilla - Eyedropper, Color Picker, Gradient Generator and more
www.colorzilla.com
4. multiple background : 여러 개의 배경 이미지를 배치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multiple background</title>
<style>
p{
padding: 100px;
background-image: url(img/bg_tree.png),
url(img/bg_sun.png),
linear-gradient(to right, rgba(0,100,0,0), rgba(0,100,0,1));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom left, 97% 15%, left;
}
</style>
</head>
<body>
<p>Multiple Background</p>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS-BOX MODEL 2 (box-sizing, box-shadow) (0) | 2020.08.20 |
|---|---|
| CSS-BOX MODEL (width, height, padding, margin, border) (0) | 2020.08.18 |
| CSS-배경(background) (0) | 2020.08.16 |
| CSS-display, visibility, opacity 속성 (0) | 2020.08.13 |
| CSS-문단(paragraph) 관련 스타일 (0) | 2020.08.12 |
댓글