그라디언트 배경색(그라데이션)

 

기본 사용 법 5가지

 

 

퍼센테이지를 주지 않으면 자연스럽게 그라데이션 효과가 나타나지만, 퍼센테이지를 주면 다음과 같이 그라디언트(그라데이션)이 없어진 것 처럼 표현된다.

 

 

Radial gradient (원형 그라디언트)

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()

radial-gradient() - CSS: Cascading Style Sheets | MDN

 

 

반복 그라디언트

 

다중 이미지 넣기

 

예시(배경이미지와 그라디언트 동시 적용)

.header-welcome-bg-box{
    height: 244px;
    background: linear-gradient(
            to bottom,
            #A24F17, transparent
          ),
          url("../../images/1.jpg") no-repeat center/cover;
    overflow: scroll;
}