-
masking + gradient = 반투명 그라데이션 효과공부한다/CSS 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
호헿헿허헤ㅔㅎ... 익스를 원망하며 글을 마무리하겠닷....
'공부한다 > CSS' 카테고리의 다른 글
<select> placeholder 만들기 (0) 2021.04.19 backdrop-filter (0) 2020.12.24 피그마를 사용해 SVG 애니메이션 적용을 해보자 (0) 2020.12.09