时间戳

首页 > 解决方案 > 在多个 div 上拉伸图像

javascript - 在多个 div 上拉伸图像

问题描述

如何将容器 1 的背景图像拉伸到容器 2？

<div class="main_container">
   <div class="container" id="container-1"></div>
   <div class="container" id="container-2"></div>
</div>

我使用了这个功能，但它并不总是有效。

var posX = 0;
var posY = 0;
var i = 0;
$(".container").each(function (ind, el) {
    $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
    posX += 20;
    i++;
    if (i == 1) {
        i = 0;
        posX = 0;
        posY += 0;
    }
})

这是 2 个容器的图像：

2 个容器的图像

谢谢

标签： javascripthtmlcss

解决方案

如果父级.main_container仅包含 2 个.containerdiv 并且背景图像必须通过加载到页面中，#container-1那么我将使用 JavaScript 将背景图像#container-1从.main_container. 然后背景图像将覆盖整个区域 -#container-1和#container-2。

const parent = document.querySelector('.main_container')
const image = document.querySelector('#container-1').style.backgroundImage
parent.style.backgroundImage = image

推荐阅读