웹개발(프론트)

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

수달찌 2021. 2. 11. 21:30

목차

     

    배경이미지 넣기

    배경 이미지를 넣어준다

    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;
}

    끝!