공부한다/CSS

masking + gradient = 반투명 그라데이션 효과

스더찡 2020. 12. 16. 21:59

가끔 사이트 돌아다니다 보면 보이던 것인데 어떻게 하는지 늘 궁금했던 그것...

이미지를 어떻게 그라데이션 있게 반투명하게 할것인가!

 

 

포토샵에서는 이렇게 하면 되던데?

벡터 마스크를 씌우고 그라데이션을 넣으면 되는데

그럼 css로 gradient와 mask 씌우면 되는건가?

 

 

 

궁금해서 해봤더니 가능은 하더라!

<body>
    <style>
        .test-img {
            -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 80%, transparent 100%);
        }
    </style>
    <div>
        <img src="./test-img.jpg" alt="" class="test-img" />
    </div>
</body>

그럴듯한 결과물이 나왔다!

 

 

 

문제점이 있다면 ie 호환이 안된다는것...

developer.mozilla.org/en-US/docs/Web/CSS/mask-image

 

mask-image - CSS: Cascading Style Sheets | MDN

The mask-image CSS property sets the image that is used as mask layer for an element. mask-image: none; mask-image: url(masks.svg#mask1); mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); mask-image: i

developer.mozilla.org

 

호헿헿허헤ㅔㅎ... 익스를 원망하며 글을 마무리하겠닷....