無法將圖片放在背景圖片（HTML，Bootstrap，CSS）上

Question

好吧，所以我對div，elements（？）的“高級”定位有一個問題，而不是其他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>

我最初完成此任務的初衷是僅使用背景圖像，而不必像我想象的那樣將背景圖像疊加在另一個背景上而麻煩，因為考慮到背景圖像會忽略背景圖像。

在我的嘗試失敗之后，我只是嘗試使用流體容器將img的“背景”圖像設置為相對，而將后者設置為絕對，也沒有運氣。

每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; 背景圖片：file：/// E：/HTML_CODE/HexStars.png（“ HexStars”）; 背景重復：不重復； 背景附件：固定； }

背景圖像值看起來格式不正確。 它看起來應該更像這樣： 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％），然后向左：50％；

無法將圖片放在背景圖片（HTML，Bootstrap，CSS）上

問題描述

2 個解決方案

解決方案1
0 2016-09-21 20:23:48

解決方案2
0 2016-09-21 20:29:18

無法將圖片放在背景圖片（HTML，Bootstrap，CSS）上

問題描述

2 個解決方案

解決方案1 0 2016-09-21 20:23:48

解決方案2 0 2016-09-21 20:29:18

解決方案1
0 2016-09-21 20:23:48

解決方案2
0 2016-09-21 20:29:18