Mask DIV с помощью CSS

Question

Ok так сказать, я использую установку последующей моей дивы:

.background будет содержать изображение. .overlay будет иметь полупрозрачный белый фон для наложения .inner эффективно маскирует прямоугольник размером с div? Чтобы фон был прозрачным и прорезал оверлейный div.

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

Возможно ли это с помощью только css?

Answer 1

Короткий ответ - нет, вы не смогли бы обрезать div своими детьми.

Но вы можете решить вашу проблему без обрезки. Насколько я понимаю, вам просто нужна белая рамка вокруг внутреннего div. Вы можете использовать border или box-shadow. Также вы можете создать такую ​​границу с 4 divs с каждой стороны

Answer 2

ДА, если вы используете PNG-изображение для маскировки. Можно обрезать фоновый div, используя его дочерние элементы. Что вам нужно сделать, чтобы использовать PNG с прозрачной областью посередине или где угодно.

Answer 3

Похоже, вы можете достичь этого, добавив толстую границу с некоторой непрозрачностью (Fiddle). Пограничные ширина будет определять размер прямоугольника желаемого:

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

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