CSS Выпало из div?

Question

У меня есть 3 элемента, уложенных друг на друга. Верхний элемент - это содержимое наложения. Второй элемент - это изображение границы фона. Нижний элемент - это фон.

Что я хочу сделать, это вытолкнуть средний элемент, чтобы я мог видеть верхний элемент в нижнем элементе, но оставьте границу среднего элемента, окружающего верхний элемент.

http://jsbin.com/unimux/4/edit

Как вы можете видеть, что средний элемент блокирует вид на нижний элемент.

Редактировать: Я попытался использовать изображение границы, но для меня это не будет отображаться с граничным радиусом.

Edit2: возможно ли получить желаемый эффект с помощью border-image? Престижность любому, кто может сделать это, выглядит не страшно с пограничным изображением.

Edit3: Некоторый прогресс на основе ответа Zuul в: http://jsbin.com/unimux/15/edit

Answer 1

Setup новый элемент, с классом, например, .apple и поместите его поверх всех остальных существующих элементов с тем же изображением, что и нижний:

посещайте JS Bin Example Altered!

div.apple { 
    margin: 100px; 
    width: 200px; 
    height: 200px; 
    background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center; 
    } 

Имея изображение по центру и дают правильное значение рентабельности, он имитирует «полый» эффект на div.middle.

Смотрите результат просмотра:

---

Если размеры элементов не совпадают, использование CSS position помогает keepping все в нужном месте:

Пример here!

Answer 2

Вы не можете сделать это с текущим состоянием CSS. Может быть, просто поместите нижний элемент поверх среднего и работайте?

Answer 3

Как и в случае с egasimus, вы не можете сделать это с помощью CSS.

Попробуйте что-то вроде this, хотя с четырьмя div s создает «окно».