linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
그라데이션을 나타낼 수 있는 속성으로 보통 배경이미지에 많이 사용된다.
특정 각도를 입력하여 각도에 맞게 그라데이션이 나타나도록 할 수 있음.
내가 만든 웹사이트에서도 이 속성이 사용되었는데,
.wrap{background: linear-gradient(to right bottom,#0f0f0f,#282828);}
오른쪽 아래 방향 ↘️ 으로 그라데이션이 가게끔 작성했음.
다음처럼 그라데이션기능과 이미지를 같이 넣어 디자인 효과를 줄 수도 있다.
background-image:
linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)),
url("pizza.png");
그라데이션 관련 유용한 사이트
'HTML, CSS' 카테고리의 다른 글
[CSS] 불투명도: opacity (0) | 2023.04.14 |
---|---|
[CSS] 그림자: box-shadow (0) | 2023.04.14 |
[CSS] 배경이미지: background-image (0) | 2023.04.14 |
[CSS] 크기 단위 (0) | 2023.04.14 |
[CSS] 색상 단위 (0) | 2023.04.14 |