个人中心
gpt4 book ai didi

html - 我有一个宽度为 1240px 的 wrapper 和一个中间有 1240px 空白空间的图像。如何放置它以便 wrapper 覆盖它？

转载 作者：行者123 更新时间：2023-11-27 23:14:10 27 4
gpt4 key购买 nike

目前我有一个设置宽度为 1240 像素的包装器。可以想象，这意味着我页面中心的 1240 像素始终被包装器覆盖。

我还有一张宽度为 3160 像素的图像(1920 像素的图像大小，在中间切割并由 1240 像素的空白区域分隔)。

现在我想让该图像成为我 body 的背景图像，但图像中的 1240px 空白区域隐藏在 1240px wrapper 后面。这样我的图像的每个部分都会显示出来，除了 1240 像素的空白空间外，不会隐藏任何东西。

另外我知道有些图像会被隐藏。根据我的计算，使用 1920x1080px 显示器的人只能看到左侧图像的 340 像素和右侧图像的 340 像素。我对此没有问题。

我该怎么做？最终结果将如下所示:

enter image description here

这是原始图像:

enter image description here

我的代码。您必须全屏打开代码才能按照预期的方式查看它:

*, *:after, *:before {
    margin: 0;
    padding: 0;
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: #eaeaea;
    height: 100%;
    width: 100%;
    background-image: url('/image/Hd35U.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
.wrapper {
    width: 1240px;
    margin: 0 auto;
    background-color: red;
    height: 1000px;
}
<html>
<head></head>
<body>
<div class='wrapper'>
</div>
</body>
</html>

最佳答案 

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        background-color: #eaeaea;
        height: 100vh;
        width: 100vw;
        background-image: url('/image/Hd35U.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .wrapper {
        width: 50%;
        margin: 0 auto;
        background-color: red;
        height: 100%;
    }
<html>
<head></head>
<body>
<div class='wrapper'>
</div>
</body>
</html>

关于html - 我有一个宽度为 1240px 的 wrapper 和一个中间有 1240px 空白空间的图像。如何放置它以便 wrapper 覆盖它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58350190/

27 4 0
文章推荐： javascript - 在数据表分页中显示第一个和最后一个按钮
文章推荐： c++ - move std::vector 的 std::unique_locks
文章推荐： javascript - 使用 JavaScript 从文本创建数组
文章推荐： C# 与 C++ 安全性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com