영역에 배경 / 그라데이션 넣는법

목차

• 배경이미지 넣기
• 그라데이션 넣기
  • 그라데이션 넣기
  • 여러개의 그라데이션 넣기
  • 원형 그라데이션 넣기
• 끝!

 

배경이미지 넣기

배경 이미지를 넣어준다

section {
  /* 배경 */
  background: url("../image/rose.jpg");
  
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

배경이미지 등장

그라데이션 넣기

 

 

 

그라데이션 넣기

section {

  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    ),
    url("../image/rose.jpg");
    
/* linear-gradient << 선형 그라디언트 */
/* 방향 to top right bottom left */
/* rgb(a) 방향으로의 비율(퍼센트) */
    
    
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

그라디언트 따단~

여러개의 그라데이션 넣기

section {

  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 0, 0, 0) 0%,
      rgba(255, 0, 0, 0.5) 100%
    ),
    url("../image/rose.jpg");
    
    
    
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

 

원형 그라데이션 넣기

원형으로도 가능하다.

(% 가 낮을수록 원의 중심이다)

section {
/*방향은 고정되어 있기에 안적는다*/
  background: radial-gradient(
      rgba(0, 0, 0, 0) 0%,
      rgba(247, 187, 187, 0.4) 100%),
    url("../image/rose.jpg");
    
    
    
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

끝!