Question

好的，所以我遇到了＆＃34;高级＆＃34; div，元素（？）的定位，以及其他div等等。我真的不确定如何将物体放在其他物体上。我尝试使用多种方法，在这里阅读回复并查找每个教程，但我似乎无法理解。：/

这是我最近尝试将图像居中并叠加在另一张图像上。

<body>

<div class="container-fluid">
    <img class="img-responsive" src="file:///E:/HTML_CODE/HexStars.png" alt="HexStars" style="position:relative;">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4"><img class="img-responsive" src="file:///E:/HTML_CODE/HexLogo.png" alt="HexStars"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

</body>

我最初想完成这个任务就是只使用背景图像而不必麻烦地将一个重叠在另一个之上，因为我想象它会忽略背景图像而考虑它在背景中。

在我尝试失败之后，我只是尝试使用液体容器来同时设置背景＆＃39;图像作为相对而后者是绝对的，没有运气。

10张照片中有9张我尝试叠加，只是坐在照片下方，试图在后面冷却。

很抱歉这么长的帖子我只是希望有人可以帮忙解释如何重新排列图像，因为我不确定人们如何神奇地知道像素坐标，并且可以快速布局img地图。

无论如何，我有一段时间没有睡觉，可能语无伦次。提前致谢。

编辑：

为什么这不起作用????

  body {
        background-color: #1a1a1a;
        background-image: file:///E:/HTML_CODE/HexStars.png("HexStars");
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

我是如此愚蠢，我想出了如何使用css背景图像，但我仍然对我问题的上半部分感到困惑。

Answer 1

在我尝试失败后，我只是尝试使用液体容器 img将'背景'图像设置为相对图像和后者图像绝对没有运气。

反过来试试这个。 position: absolute将图像从DOM流中取出，从而可以在其上面放置其他元素。你想在背景img容器上使用position:absolute，在顶部的图像上使用position:relative。

为什么这不起作用????

body {       background-color：＃1a1a1a;       background-image：file：/// E：/HTML_CODE/HexStars.png（“HexStars”）;       background-repeat：no-repeat;       背景附件：固定; }

背景图像值看起来不正确。它应该看起来更像这样： background-image: url("paper.gif");或者您举例说明了这样的内容：background-image: url("file:///E:/HTML_CODE/HexStars.png");

Answer 2

使用类似的东西

HTML：

<div class="image img img-responsive img-thumbnail full-width">
    <img src="......" alt />
</div>

CSS：

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
    width: 100%;
}
.image img{
    position:absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

这将使图像垂直居中。如果你想让它水平居中，请添加translateX（-50％）和left：50％;

无法将图像放在背景图像上（Html，Bootstrap，CSS）

2 个答案: