Способ разделения одного фонового изображения на несколько div для создания эффекта "оконного"?

Мне было интересно, есть ли простой способ "черепицы" или "окна" одного фонового изображения через несколько div. Я хочу создать вид пробитого окна.

Имейте в виду, что я хочу динамически добавлять эти поля. Будет максимум 16, но я мог бы иметь 9.

У меня есть скрипка: ссылка на скрипку

То, что я хочу сделать, это вместо того, чтобы показывать фоновое изображение, оно будет просто белым. И вместо того, чтобы divs были белыми, они содержат этот раздел фонового изображения. Извините, если это не очень хорошее описание, но в основном я хочу поменять белый фон.

так что-то вроде:

<div id="blocks">
  <div class="block" style=" background: some-section-of-image ;"></div>
  <div class="block" style=" background: some-section-of-image2;"></div>
  <div class="block" style=" background: some-section-of-image3;"></div>
  <div class="block" style=" background: some-section-of-image4;"></div>
</div>

Я хотел бы сделать это с минимальным jQuery, насколько это возможно... но, возможно, это невозможно.

Я немного поиграл с настройкой

opacity:0.0;

только на блоках, но не может понять, как не отображать изображение в другом месте. Спасибо!

Ответ 1

Решение только для CSS

То, что вы описываете, это в основном таблица с фоновым изображением и белыми границами. Простое решение может быть достигнуто путем создания табличного макета только с CSS.

#background-container { 
    display:table;
    width:100%;
    border-collapse:collapse;
    box-sizing:border-box;
     /**/
    background: url(path-to-background-image) no-repeat center center;
    background-size: cover;
     /* Vendor specific hacks */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.blocks {
    display:table-row;
}

.block {
    display:table-cell;
    height:100px;
    border:10px solid #FFF;
}

См. jsFiddle Demo

Ответ 2

Я вошел во что-то почти 100%. Не стесняйтесь (кто-либо) отредактировать ответ.

CSS

#blocks {
    width:100%;
    height:100px;
}
.block {
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}

jQuery (JS)

$(function () {
    var posX = 0;
    var posY = 0;
    var i = 0;

    $(".block").each(function (ind, el) {
        $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");

        posX += 20;
        i++;

        if (i == 4) {
            i = 0;
            posX = 0;
            posY += 25;
        }
    });
});

Демо (для улучшения): http://jsfiddle.net/bzCNb/33/

Ответ 3

Попробуйте поместить фон на блоки вместо страницы с фиксированным вложением и выравниванием левой верхней части. К сожалению, с этой опцией, если страница прокручивается, фон кажется фиксированным.

.block{
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
}

http://jsfiddle.net/bzCNb/28/