[CSS] 배경 이미지만 투명하게 만들기

프로젝트 진행 중 background에 이미지를 넣고, 이미지만 투명하게 만들어야하는 작업을 해야했다. opacity를 주게 되면 하위 태그들에도 적용이 되기 때문에 전체적으로 투명하게 된다.

function MapSection() {
  return (
    <SeoulImg>
      <MapText>
        서울시 공공 쓰레기통
        <br />
        위치 확인
      </MapText>
      <MapButton>쓰레기 버리러 가기</MapButton>
    </SeoulImg>
  );
}

export const SeoulImg = styled.div`
  height: 100vh;
  text-align: center;
  background: url("./seoul.jpg") no-repeat;
  background-size: contain;
  opacity: 0.45;
`;

만약 배경 이미지만 투명하게 만들고 싶다면 아래와 같이 코드를 짜면 된다.

1. 가상요소(before)를 만들어주고 가상요소에 배경 이미지를 넣기
2. 가상 요소의 position 값을 absolute를 주고 각 위치(상하좌우)를 0으로 맞추기
3. 가상 요소를 제외한 태그는 position 값을 relative로 주기

export const SeoulImg = styled.div`
  height: 100vh;
  text-align: center;
  position: relative;
  ::before {
    content: "";
    background: url("./seoul.jpg") no-repeat;
    background-size: contain;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.45;
  }
`;

export const MapText = styled.p`
  font-size: 0.8rem;
  position: relative;
`;

또 다른 방법으로 배경 이미지 위에 필터를 씌우는 방법이 있다.

export const SeoulImg = styled.div`
  height: 100vh;
  text-align: center;
  position: relative;
  background: url("./seoul.jpg") no-repeat;
  background-size: contain;
  ::before {
    content: "";
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.45;
  }
`;

추가로 버튼이나 배경색이 있는 요소들의 배경색을 투명으로 하고 싶다면 이렇게 하면 된다.

background-color: rgba(255, 255, 255, 0);

참고문헌

https://ddorang-d.tistory.com/89