순수 CSS를 사용하여 div (직사각형) 안에 투명한 원을 만들려면 어떻게해야합니까?

Question

> 

1. 예

=======

나 다른 요소 위에 DIV (사각형) (예를 들어 화상) 국지적 화상 볼 만 있어야한다는 놓으면 div (직사각형) 내부의 원을 통해.

Answer 1

무하마드 (Muhammad)가 귀하의 질문에 다소 모호하고 (형식이 잘 맞지 않음) 댓글을 달았지만 clip-path CSS 규칙을 사용하여 "마스크"레이어를 클리핑 한 것 같은가요? http://codepen.io/chriscoyier/pen/02e4ebad4c8d3beeb0dc4781a811a37c

그리고 heres는 해당 기사 - -

다음은 CSS 클립 경로를 보여주는 codepend의 https://css-tricks.com/clipping-masking-css/

내가 생각할 수있는 질문의 유일한 다른 해석이에 기본 국경 반경 규칙입니다 오버플로가 설정된 div는 숨김으로 설정됩니다.

.rectangle { 
    background-image: url(yourimage.jpg); 
    border-radius: 100px; 
    width: 100px; 
    height: 100px; 
} 

편집 : 귀하의 의도는 의견 섹션에 명시된대로. 다음과 같이 div 요소에 의사 요소를 사용하여 클리핑 마스크를 만들 수 있습니다.

.rectangle { 
    position: relative; 
} 
.rectangle:after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate3d(-50%,-50%,0); 
    width: 30px; 
    height: 30px; 
    border-radius: 30px; 
    background-image: url(yourimage.jpg); 
    background-size: 200px 100px; 
}