[CSS]배경이미지에만 OPACITY 적용(multiple효과)

 

'배경만 흐리게 또는 배경에 색상필터를 줄 수 있는 방법이 없을까?' 

'배경만 살짝 어둡게 해서 글씨가 더 잘보이게 하고 싶은데 어떻게 하면 좋을까?'

고민하면 발견한 방법에 대해 적어봅니다.

 

 

---

문제점! : OPACITY를 주면 글씨도 같이 적용됨

 

HTML

    <div class="box01">
        <h1>배경만 투명하게</h1>
    </div>

CSS

    .box01{width: 500px;height: 300px;
        background: url(https://cdn.pixabay.com/photo/2020/06/28/00/04/chicago-5347435_960_720.jpg);
        background-size: cover;        opacity: 0.5;
    }
    .box01 h1{color: rgb(121, 68, 219);text-align: center;line-height: 300px;}

결과

이렇게 박스에 OPACITY에 주면 전체가 다 흐리게 변합니다!

---

해결법1 : 배경이미지를 가상요소에 넣기

CSS

    .box01{
        width: 500px;
        height: 300px; 
        position: relative;}
    .box01::before{
        content: "";
        background: url(https://cdn.pixabay.com/photo/2020/06/28/00/04/chicago-5347435_960_720.jpg);
        background-size: cover;
        opacity: 0.5;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
    .box01 h1{
    color: rgb(121, 68, 219);
    text-align: center;
    line-height: 300px;  
    position: relative;}

박스에 가상요소(before)를 만들어주고 가상요소에 배경이미지를 넣어주면 글씨에 영향주지 않고 배경이미지만 OPACITY를 조정할 수 있습니다. 그리고 가상요소의 POSITION 값을 abolute를 주고 각 위치(top/ left / right / bottom)를 0로 맞춰주면, box01의 사이즈와 동일하게 가상요소의 사이즈(배경이미지)를 맞출 수 있습니다.  

 

정리하면

1. 가상요소를 만들어주고 가상요소에 배경이미지 넣어주기

2. box01의 position 값은 relative, 가상요소의 position 값은 abolute를 설정

3. 가상요소의 위치(top/ left / right / bottom)를 모두 0를 맞추기

4. 글씨(h1)는 position: relative를 주어 배경이미지보다 위로 올라오게 하기

 

결과물

---

해결방법2 : 가상요소를 이용해 필터만들기

CSS

    .box01{
        width: 500px;
        height: 300px; 
        position: relative;
        background: url(https://cdn.pixabay.com/photo/2020/06/28/00/04/chicago-5347435_960_720.jpg);
        background-size: cover;
        }
    .box01::before{
        content: "";
        opacity: 0.5;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #000;
    }
    .box01 h1{
    color: #fff;
    text-align: center;
    line-height: 300px;  
    position: relative;}

결과

결과물은 이전과 다르지만 활용할 수 있는 해결책 중에 하나가 될 수 있을 것 같다. 

첫번째 해결책은 배경이미지 자체를 흐리게 했다면, 이 방법은 배경이미지 위에 가상요소에 투명도가 있는 검정색 박스(필터)를 놓은 것이다. 글씨만 강조하고 싶을때 이 방법이 더 유용할 것 같다. 검정색이 아니라 다른색상을 넣는다면 색상필터처럼 활용가능하다.  

 

방법을 정리하자면

1. 윗 해결책과 동일하게 세팅하되, 배경이미지를 box01에 넣어준다. 

2. 가상요소(::before)에는 배경색상을 설정해주고, opacity를 적당히 준다.