html - 一张背景图片分成多个div

Question

我对实现这个有一些疑问。我将背景图像放在多个 div 中，但效果不佳。当我缩小或放大屏幕时，图像在 fixed 上重复。当我将它更改为 absolute 时，每个 div 都有自己的图像。

是否可以解决这些问题？

这是 fiddle :

header {
    position: relative;
    height: 100vh;
    padding: 75px;
}


header div.container {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 425px;
    display: flex;
    overflow: hidden;
}
header div.container .context {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/*
= cols
=== */
header
.container
.col {
    width: 50%;
    height: 425px;
}
header
.container
.col
.image {
    height: 100%;
    height: 50%;
    background-image: url("https://i.imgur.com/jtZfhST.png");
    background-attachment: fixed;
    background-position: top left;
}

header
.container
#col-left {
    position: relative;
    z-index: 2;
    top: 12.5px;
}
header
.container
#col-left
.image1, .image3 {
    margin-right: 2px;
}
header
.container
.col
.image1, .image2 {
    margin-bottom: 2px;
}


header
.container
#col-right {
    position: relative;
    z-index: 2;
    bottom: 12.5px;
}

<header>
    <div class="container">            
        <div class="col" id="col-left">
            <div class="image image1"></div>
            <div class="image image3"></div>
        </div>
        <div class="col" id="col-right">
            <div class="image image2"></div>
            <div class="image image4"></div>
        </div>
    </div>
</header>

Answer 1

这是您要找的吗？

.split {
    background-image: url(https://images.unsplash.com/photo-1568955773021-d347deaffa1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1289&q=80);
    background-attachment: fixed;
    width: 30%;
    height: 300px;
    margin: 0 10px 10px 0;
    display: inline-block;
    background-size: cover;
      background-position: center;
}

.container {
    margin: 10px 0 0 10px;
}

<div class="container">
    <div class="row">
        <div class="split"></div>
        <div class="split"></div>
        <div class="split"></div>
    </div>
    <div class="row">
        <div class="split"></div>
        <div class="split"></div>
        <div class="split"></div>
    </div>
</div>