CSS 배경
- 이전 페이지 CSS HSL 색상
- 다음 페이지 CSS 배경 이미지
CSS 배경 속성은 요소의 배경 효과를 정의합니다.
이 장에서는 다음과 같은 CSS 배경 속성을 배웁니다:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color
background-color 속성은 요소의 배경색을 지정합니다.
예제
페이지의 배경색 설정은 다음과 같습니다:
body {
background-color: lightblue;
}
CSS에서는 일반적으로 다음과 같은 방식으로 색상을 지정합니다:
- 유효한 색상 이름 - 예를 들어 "red"
- 16진 값 - 예를 들어 "#ff0000"
- RGB 값 - 예를 들어 "rgb(255,0,0)"
보기: CSS 색상 값색상 값의 완전한 목록을 확인하려면.
기타 요소
모든 HTML 요소에 배경색을 설정할 수 있습니다:
예제
여기서, <h1>, <p>, 및 <div> 요소는 다른 배경색을 가집니다:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
불투명도 / 투명도
opacity 속성은 요소의 불투명도/투명도를 지정합니다. 값의 범위는 0.0 - 1.0입니다. 값이 낮을수록 투명합니다:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
예제
div {
background-color: green;
opacity: 0.3;
}
주의:사용 투명도 요소의 배경에 투명도를 추가할 때, 모든 자식 요소는 동일한 투명도를 继承합니다. 이는 완전히 투명한 요소 내의 텍스트를 읽기 어려울 수 있습니다.
RGBA 투명도 사용
위 예제와 같이 자식 요소에 투명도를 적용하지 않고 싶다면 다음을 사용하세요: RGBA 색상 값. 다음 예제에서는 배경색을 설정하는 것이 아니라 텍스트의 투명도를 설정하는 예제입니다:
100% 투명도
60% 투명도
30% 불투명도
10% 불투명도
您从我们的 CSS 색상 章节中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道一起使用（RGBA） - 该通道指定颜色的不透明度。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
提示：您可在我们的 CSS 색상 的这一章中学到了更多关于 RGBA 颜色的知识。
예제
div {
background: rgba(0, 128, 0, 0.3) /* 30% 불투명도의緑색 배경 */
}
- 이전 페이지 CSS HSL 색상
- 다음 페이지 CSS 배경 이미지
