Wie kann ich einen transparenten Kreis in einem div (Rechteck) mit reinem CSS erstellen?

Question

> 

1. Beispiel

=======

wenn ich das div Ort (Rechteck) über ein beliebiges anderes Element (zum Beispiel ein Bild) .Der Bild nur sichtbar sein soll durch den Kreis innerhalb dieses div (Rechtecks).

Answer 1

Wie Muhammad kommentierte Ihre Frage ist ein wenig vage (und nicht sehr gut formatiert), aber es klingt wie Sie nach einem Ausschnitt "Maske" Schicht mit der clip-path CSS-Regel?

Hier ist ein codepend den CSS-Clip-Pfad zur Schau stellt - http://codepen.io/chriscoyier/pen/02e4ebad4c8d3beeb0dc4781a811a37c

Und heres den entsprechenden Artikel - https://css-tricks.com/clipping-masking-css/

Die einzige andere Interpretation Ihrer Frage, die ich mir vorstellen kann, ist eine grundlegende Grenze Radius Regel auf die div mit Überlauf auf versteckt.

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

EDIT: Wie Sie jetzt Ihre Absichten in den Kommentaren angegeben haben. Sie können eine Ausschnittsmaske erreichen, indem Sie Pseudoelemente auf Ihrem div Element wie folgt verwenden:

.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; 
}