[css] 이미지 뒤에 불투명한 이미지깔기

css를 이용해서 이미지 위에 불투명한 이미지 배경 깔기 배경색에 비해 이미지 색상이 너무 튀어 보일 때, 다양한 이미지를 동일한 페이지에 사용할 때 유용하다!

<a href="#" class="poster">
이미지이름
</a>

✅html
1) 해당 이미지를 클릭할 수 있게 <a> 태그에 이미지 이름을 넣어준다

.poster::after{
    background: url(/앞에넣을이미지경로/) no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    content: " ";
    z-index: 2;
    width: 406px;
    height: 575px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.poster::before{
    background: url(/뒤에넣을이미지경로/) no-repeat;
    background-size: cover;
    position: absolute;
    display: block;
    content: " ";
    z-index: 1;
    filter: blur(10px) brightness(0.3);
}

✅css
1-1) background에 넣을 이미지 경로 지정, 사이즈 조정
1-2) 가상 요소 after를 사용하기 위해 inline요소 태그 <a>를 display block처리
1-3) 가상 요소 사용을 위해 position, content를 입력
1-4) before에 깔릴 이미지보다 앞에 두기 위해 z-index 값을 before보다 크게 지정
1-5) 배경 이미지 사이즈와 동일하게 width와 height값 지정
1-6) positon을 활용하여 중앙에 위치

☑️https://rara-code.tistory.com/6?category=1072320
중앙 정렬하기 참고

[css] position 중앙정렬 하기

 

2-1) background에 넣을 이미지 경로 지정(같으면 같은 경로로 지정), 사이즈 조정(풀 이미지 설정을 위해 cover사용)
2-2) 가상 요소 after를 사용하기 위해 inline요소 태그 를 display block처리
2-3) 가상 요소 사용을 위해 position, content를 입력
2-4) after 이미지보다 앞에 두기 위해 z-index 값을 after보다 작게 지정
2-5) 흐릿하고 어두운 색상의 이미지를 위해 filter값을 조정

✔️ 가상 요소는 block요소만 사용가는
✔️ 가상 요소 사용을 위해 position과 content 값 입력
✔️ z-index를 화면 구성에 활용