将单个背景图像划分到多个 div 以创建“窗口化”效果的方法？

Question

I was wondering if there is an easy way to "tile" or "window" a single background image across multiple divs. I want to create a sort of punched out window look.

Keep in mind that I want to dynamically add these boxes. There will be a maximum of 16, but I could have 9.

I have a fiddle here: link to fiddle

What I want to do is instead of the background image showing, it would just be white.. And instead of the divs being white, they contain that section of the background image. Sorry if this is not a very good description, but basically I want to swap the white with the background.

so something like:

<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>

I'd like to do this with as little jQuery as possible... but maybe that is not feasible.

I fiddled around some with setting

opacity:0.0;

on just the blocks, but can't figure out how to not display the image elsewhere. Thanks!

Answer 1

A CSS-only solution

What you are describing is basically a table with a background image and white borders. A simple solution can be achieved by creating a table-like layout with CSS only.

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

See jsFiddle Demo

Answer 2

I came into something that's nearly a 100%. Feel free (anyone) to edit the answer.

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

Demo (to be improved): http://jsfiddle.net/bzCNb/33/

Answer 3

Try putting the background on the blocks instead of the page with fixed attachment and alignment of left top. Unfortunately with this option if the page scrolls the background appears fixed.

.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/

Answer 4

I found the question interesting and wondered how hard it would be to do this with vanilla JavaScript nowadays, for any tile shapes or positions.

Answer: it's not so hard.

Snippet below illustrates that with 3 different ways of laying out tiles for a tiled image, all handled by the same JavaScript code.

It works with the following algorithm:

1. find an element with class tiled-image . Use this frame's dimensions for image layout
2. find the first <img> element inside it: use it's src as tiled image. Remove it
3. For all elements with class tile inside it, find their position, set their background as the image, with background-position offset so it always matches the frame's upper-left, and background-size set to the frame's size

Current limitation: the frame's size must match the image's aspect ratio. Could easily be improved for dynamic image sizes

 window.addEventListener('load', _e=> { const tFrames = document.querySelectorAll('.tiled-image');//Find tiled frames tFrames.forEach(frame => { //For each one const img = frame.querySelector('img'); //Retrieve first img if (!img || !img.src) return; img.remove(); //Remove it const src = img.src; //Store its src const fBounds = frame.getBoundingClientRect(); //Store position of frame frame.querySelectorAll('.tile').forEach(tile => { //For each tile tile.style.backgroundImage = `url('${src}')`; //Set bg image to img's src const tBounds = tile.getBoundingClientRect(); //Find position //Position background to frame's upperleft corner const bx = tBounds.left - fBounds.left; const by = tBounds.top - fBounds.top; tile.style.backgroundPosition = `left ${-bx}px top ${-by}px`; //Set background size to frame's size tile.style.backgroundSize = `${fBounds.width}px ${fBounds.height}px`; }); }); });

 /*General positioning */ .tiled-image { box-sizing: content-box; width: 800px; height: 600px; } /* fallback to regular image if javascript doesn't run */ .tiled-image img { display: block; width: 100%; height: 100%; } /* DONE. The rest is decoration and specific tile positioning for the 3 examples */ body { background: linear-gradient(164deg, rgba(0,0,0,1) 0%, rgba(145,145,167,1) 35%, rgba(70,80,82,1) 100%); } .light-text { color: gainsboro; } .tiled-image + .tiled-image { margin-top: 1em; } /* debugging help */ /* .tiled-image { outline: 1px solid blue; } .tiled-image .tile { outline: 1px solid red; } */ /* regular grid */ #ti-1 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; } /* irregular grid */ #ti-3 { display: grid; grid-template-areas: "aacccc" "bbcccc" "bbddee" "bbddee"; grid-gap: 10px; } #ti-3 .ta { grid-area: a; } #ti-3 .tb { grid-area: b; } #ti-3 .tc { grid-area: c; } #ti-3 .td { grid-area: d; } #ti-3 .te { grid-area: e; } /* position absolute */ #ti-2 { position: relative; } #ti-2 .tile { position: absolute; } #ti-2 .t0-0 { left: 0; top: 10px; width: 150px; height: 200px; } #ti-2 .t0-1 { left: 180px; top: 0; width: 220px; height: 400px; } #ti-2 .t0-2 { left: 410px; top: 30px; width: 380px; height: 510px; } #ti-2 .t1-0 { left: 20px; top: 220px; width: 150px; height: 380px; } #ti-2 .t1-1 { left: 180px; top: 420px; width: 210px; height: 170px; } #ti-2 .t1-2 { top: 560px; left: 400px; height: 40px; width: 400px; }

 <h4 class="light-text">With regular grid</h4> <div class="tiled-image" id="ti-1"> <img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-048.jpg" /> <div class="tile t0-0"></div> <div class="tile t0-1"></div> <div class="tile t0-2"></div> <div class="tile t1-0"></div> <div class="tile t1-1"></div> <div class="tile t1-2"></div> <div class="tile t2-0"></div> <div class="tile t2-1"></div> <div class="tile t2-2"></div> </div> <!-- DONE. Next examples use the same code with different numbers of tiles --> <h4>With irregular grid</h4> <div class="tiled-image" id="ti-3"> <img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-042.jpg" /> <div class="tile ta"></div> <div class="tile tb"></div> <div class="tile tc"></div> <div class="tile td"></div> <div class="tile te"></div> </div> <h4>With position: absolute</h4> <div class="tiled-image" id="ti-2"> <img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-047.jpg" /> <div class="tile t0-0"></div> <div class="tile t0-1"></div> <div class="tile t0-2"></div> <div class="tile t1-0"></div> <div class="tile t1-1"></div> <div class="tile t1-2"></div> </div>