CSS background 이미지에 그라데이션 : linear-gradient
최근에 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’); } 결과 중간에서 위로 검정 그라데이션 … Read more