Mask div mit CSS

Question

Ok, so sagen, dass ich für meinen divs der Folge Setup bin mit:

.background wird ein Bild enthalten. .overlay wird einen halbtransparenten weißen Hintergrund für das Overlay haben .inner würde effektiv ein Rechteck die Größe der div ausmasken? Damit ist der Hintergrund transparent und schneidet das Overlay div.

<div class="background"> 
    <div class="overlay"> 
     <div class="inner"> 
     </div> 
    </div> 
</div> 

Ist dies mit nur CSS möglich?

Answer 1

Kurze Antwort ist - nein, du könntest div nicht durch seine Kinder abschneiden.

Aber Sie können Ihr Problem ohne Clipping lösen. Wie ich es verstehe, braucht man nur einen weißen Rand um das innere Div. Sie können Rahmen oder Box-Schatten verwenden. Sie können auch einen Rahmen mit 4 Divs auf jeder Seite erstellen.

Answer 2

JA, wenn Sie ein PNG-Bild für die Maskierung verwenden. Es ist möglich, das Hintergrund-Div mit seinen Kindern zu schneiden. Was Sie tun müssten, wäre ein PNG mit transparentem Bereich in der Mitte oder wo immer Sie wollen.

Answer 3

Sieht aus wie Sie erreichen können, dass ein dicker Rand mit etwas Opazität (Fiddle) hinzugefügt wird. Die Rahmenbreiten wird Größe des Rechtecks ​​bestimmen gewünscht:

<div class="background"> 
    <div class="inner"> 
    </div> 
</div> 

und CSS:

html, body { 
    height: 100%; 
    width: 100%; 
} 
.background { 
    width: 100%; 
    height: 100%; 
    background: url('http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg'); 
} 
.inner { 
    width: 100%; 
    height: 100%; 
    border-top: 130px solid rgba(255, 255, 255, 0.5); 
    border-bottom: 130px solid rgba(255, 255, 255, 0.5); 
    border-left: 100px solid rgba(255, 255, 255, 0.5); 
    border-right: 100px solid rgba(255, 255, 255, 0.5); 
    box-sizing: border-box; 
}