CSS background 이미지에 그라데이션 : linear-gradient

by

최근에 CSS 작업을 하다가, 웹디자이너에게 그라데이션 이미지를 받지 못한 경우가 생겼습니다. 연락하고, 다시 이미지 받는 게 귀찮아서 이걸 CSS로 한번 처리해 보도록 하겠습니다.

기본 설정

linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%) : 결과 확인

.img-wrap {
    display:block;
    margin:0;
    padding:0;
    width:400px;
    height:300px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%),
        url('https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20120808_237%2Fctho_1344403552973tDyqO_PNG%2F%25C0%25CC%25B9%25CC%25C1%25F6%25BD%25BD%25B6%25F3%25C0%25CC%25B5%25E501.png&type=sc960_832');
}

결과

중간에서 위로 검정 그라데이션 적용

linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%) : 결과 확인

.img-wrap {
    display:block;
    margin:0;
    padding:0;
    width:400px;
    height:300px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%),
        url('https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20120808_237%2Fctho_1344403552973tDyqO_PNG%2F%25C0%25CC%25B9%25CC%25C1%25F6%25BD%25BD%25B6%25F3%25C0%25CC%25B5%25E501.png&type=sc960_832');
}

결과

중간에서 아래로 검정 그라데이션 적용

linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) : 결과 확인

.img-wrap {
    display:block;
    margin:0;
    padding:0;
    width:400px;
    height:300px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%),
        url('https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20120808_237%2Fctho_1344403552973tDyqO_PNG%2F%25C0%25CC%25B9%25CC%25C1%25F6%25BD%25BD%25B6%25F3%25C0%25CC%25B5%25E501.png&type=sc960_832');
}

결과

마무리

linear-gradient() 요소 설정은 여러 가지 있지만, 제가 일단 확인된 to bottom만 먼저 알아봤습니다. 그라데이션이 시작하는 위치와 끝나는 위치를 잘 조절하셔서 적용하시면 될 거 같습니다.




이미지 출처 : 네이버 이미지