linear-gradient
background-image: linear-gradient(color, color);
background-image: linear-gradient(degrees, color, color);
background-image: radial-gradient(color, color);
background-image: radial-gradient(circle, color, color);
background-image: radial-gradient(circle, color 0%, color 20%, color 100%);
background-image: radial-gradient(circle closest-side, color 0%, color 20%, color 100%);
background-image: radial-gradient(circle closest-corner, color 0%, color 20%, color 100%);
background-image: radial-gradient(circle farthest-side, color 0%, color 20%, color 100%);
background-image: radial-gradient(circle farthest-corner, color 0%, color 20%, color 100%);
background-image: radial-gradient(circle closest-side at 45px 45px, color 0%, color 20%, color 100%);
* %는 위치값을 나타냄
그레디언트를 지정할 때, background-image 속성을 사용합니다. 단축 속성 background 속성도 가능.
* 방향 : 기본값은 위에서 아래로
*rgba 쓰면 rgba로 일관성 줘야함. #쓰면 안 먹힌다.
시작점은 생략하고 to로 목적지를 설정한다.(시작접을 설정하려면 to 없애면 됨)
to right
to top right (상단 오른쪽으로)
to bottom left (하단 왼쪽으로 )
*여러가지 색상 추가
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69, #4496e3, #51b0dc);
*각도 지정하기
0deg는 아래에서 위 방향
45deg는 하단 왼쪽에서 상단 오른쪽 방향(즉 45도 방향임)
90deg는 왼쪽에서 오른쪽 방향
180deg는 상단에서 하단 방향
음수도 가능.
백그라운드
여러개의 이미지를 사용할 경우
먼저 쓴 이미지가 앞으로 나온다.