clip-path 프로퍼티로 이미지를 좋아하는 형태로 흐림
SVG path를 사용하여 임의의 형태로 자릅니다.
clipPath 요소의 자식 요소는 circle이거나 path이거나, 좋은 도형을 기술하고 clip-path의 url()로 id를 지정하면 할 수 있습니다.
아래 샘플은 Chrome/Safari에서만 작동합니다.
(이미지는 예에 따라 CANDY GO!GO!의 나츠키 아일씨)
cliping.html
<!DOCTYPE html>
<html>
<head>
<title>クリッピング</title>
<style type="text/css">
img {
-webkit-clip-path: url(#clipping); //for Safari,Chrome
}
</style>
</head>
<body>
<img src="hello.jpg">
<svg>
<defs>
<clipPath id="clipping">
<!-- 切り取りたい形を表すpath -->
<path d="M20,20 L250,50 300,350 50,300 Z" />
</clipPath>
</defs>
</svg>
</body>
</html>
결과는 다음과 같습니다.
Reference
이 문제에 관하여(clip-path 프로퍼티로 이미지를 좋아하는 형태로 흐림), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sassy_watson/items/b49ace73b7626d26457f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
