CSS Background-image만 투명하게 만들기

 

글자가 잘 보이지 않아서 심기가 불편하다.

 

 

 

사실 투명하게 만든다고 했지만 opacity를 사용할 생각은 없다.

opacity를 사용하면 배경이 뿌옇게 변하기 때문에 필터를 씌워서 글자의 가독성을 높이는 것이 더 효율적이다.

 

방법은 굉장히 간단하다.

 

.jumbotron {
    position: relative;
    color: rgba(255,255,255,1);
    background-color: transparent;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    background-image: url(../../image/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    h1 {
        position: relative;
        font-size: 60px;
        z-index: 100;
    }

    p {
        position: relative;
        font-size: 30px;
        z-index: 100;
    }
}

.jumbotron::before {
    position: absolute;
    content: "";
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

 

가상선택자 ::before 혹은 ::afterf를 이용해 불투명한 빈 박스를 배경 이미지 위에 입혀주고 요소는 z-index를 이용해 제일 위로 올려주면 된다.

 

 

 

 

편 - 안

 

글자의 가독성이 훨씬 좋아졌다.

근데 사실 글자 가독성이 문제가 아니라 배경 이미지 자체가 마음에 안 든다 ㅎㅎ