css background-image 속성
1. 정의 및 사용
- background-image속성은 요소에 대해 하나 이상의 배경 이미지를 설정한다. 기본적으로 배경 이미지는 요소의 왼쪽 상단 모서리에 배치되며 세로 및 가로로 반복된다.
- 기본값 : 없음
- 상속 : No
- 애니메이션 가능 : No
- 버전 : CSS1 + CSS3의 새로운 값
2. css 구문과 속성
- background-image : url | none | initial | inherit;
- url('URL') : 이미지의 URL. 두개 이상의 이미지를 지정시 URL을 쉼표로 구분한다.
- none : 배경이미지가 표시되지 않는다(기본값).
- conic-gradient() : 원뿔형 그라디언트는 중심점을 중심으로 회전된 색상 전환이 있는 그라디언트이다. 최소한 두 개의 색상을 정의해야 한다.
- linear-gradient() : 선형 그래디언트를 배경 이미지로 설정한다. 최소한 두 개의 색상을 정의해야 하며 그라데이션 효과와 함께 시작점과 방향(또는 각도)을 설정할 수도 있다.
- radial-gradient() : 방사형 그래디언트를 배경 이미지로 설정한다. 최소한 두 개의 색상을 정의해야 한다.
- repeating-conic-gradient() : 원뿔 그래디언트를 반복하는 데 사용한다.
- repeating-linear-gradient() : 선형 그래디언트를 반복하는 데 사용한다.
- repeating-radial-gradient() : 방사형 그래디언트를 반복하는 데 사용한다.
- initial : 기본 값으로 CSS 속성을 설정하는 데 사용된다.
- inherit : 부모 요소의 값을 상속받는다.
3. 예제
- conic-gradient
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
- linear-gradient
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: linear-gradient(red, yellow, green);
}
</style>
- radial-gradient
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: radial-gradient(red, yellow, green);
}
</style>
- repeating-conic-gradient
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
</style>
- repeating-linear-gradient
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: repeating-linear-gradient(red 10%, yellow 20%);
}
</style>
- repeating-radial-gradient
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: repeating-radial-gradient(red 10%, yellow 20%);
}
</style>
- inherit
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>
'Web Programming > ----- CSS -----' 카테고리의 다른 글
| [CSS] css 스타일 적용 (0) | 2021.11.18 |
|---|---|
| [CSS] css의 기본 문법 (0) | 2021.11.10 |
| [CSS] css 란 무엇인가? (0) | 2021.10.22 |