10_CSS 배경속성의 종류와 사용법
background 속성은 사용자가 선택한 요소의 배경색, 배경이미지를 삽입하기 위한 속성으로,
- background-color : 배경색(단일색, 그라디언트 가능)
- background-image : 배경 이미지 삽입(url)
- background-repeat : 배경 반복 설정
- background-size : 배경 이미지 크기 설정(px, %, cover, contain)
- background-position : 배경 이미지 위치 지정(x, y)
- background-origin : 배경 이미지 기준 위치 지정
- background-attachment : 배경 이미지 고정하기
- 멀티백그라운드 : CSS3에서 추가된 속성으로 여러 이미지를 한꺼번에 배경으로 삽입 가능
1. 배경색 삽입(background-color)
배경색을 삽입하기 위한 색상값의 종류로는 색상명, hex콛(#000), rgb, rgba, hsl, hsla가 있음
투명도 조절 ) a는 alpha의 약자로 %를 소수점으로 환산하여 입력함
opacity와 alpha의 차이점 ) opacitiy는 글자와 배경 모두 투명하게 하지만, alpha는 배만 투명도가 적용됨
배경색과 투명도 같이 적용하기 background-color: rgba(255, 100, 100, .9)
배경색과 투명도 같이 적용하기 background-color: rgba(255, 100, 100, .6)
배경색과 투명도 같이 적용하기 background-color: rgba(255, 100, 100, .3)
배경색과 투명도 같이 적용하기 opacity: 0.6
2. 그라디언트(gradient)
그라디언트란 2가지 이상의 색상이 점진적으로 변하는 색상을 말하며, 웹에서도 그라데이션 색상을 표현 할 수 있음. 선형(linear)과 원형(radial) 2가지 종류가 있음
https://www.colorzilla.com
- 선형 그라디언트
- 원형 그라디언트
- 사용자 그라디언트
배경이미지 삽입
배경이미지 반복설정
배경이미지 크기 지정
배경이미지 위치지정
배경이미지 기준 위치 설정(origin)
배경이미지 고정하기
멀티 배경이미지 삽입