無法將圖像定位在背景圖像上（Html，Bootstrap，CSS）

好的，所以我有一個div的元素（？）的「高級」定位問題，無論是否超過其他div等。我真的不確定如何將對象置於其他人之上。我嘗試過使用多種方法，在這裏閱讀回覆並查看每個教程，但我似乎無法理解。：/無法將圖像定位在背景圖像上（Html，Bootstrap，CSS）

這是我最近嘗試在另一幅圖像上居中併疊加圖像。

<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的設置「背景」形象相對的，後者絕對沒有運氣有任何的液體容器嘗試。

9次了10年的照片即時試圖只覆蓋坐在照片即時通訊試圖在後面的寒意下方。

對不起，這麼長的帖子我只是希望有人可以幫助解釋如何重新排列的圖像作爲即時通訊不知道的人神奇怎麼知道像素COORDS，並且可以在一個單元佈局IMG地圖。

無論如何，我沒有睡在一個即時im可能不連貫。提前致謝。

編輯：

爲什麼犯規這項工作????

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

我這麼笨，我想出瞭如何使用CSS背景圖像，但我仍然困惑在我的問題的上半部分。

來源

2016-09-21 Mike Remley

發佈您的整個HTML和CSS文件 – Stormhashe

之後我嘗試失敗了那裏，我只是使用液體容器兩個IMG的設置「背景」形象相對，後者絕對沒有運氣有任何企圖。

這周圍嘗試其他方式。 position: absolute將圖像從DOM的流程中取出，使其上可能有其他元素。你想要position:absolute在背景上的img容器上，而position:relative在圖像上面。

爲什麼犯規這項工作????

體{ 背景色：＃1a1a1a; background-image：file：/// E：/HTML_CODE/HexStars.png（「HexStars」）; background-repeat：no-repeat; background-attachment：fixed; }

背景圖像值看起來不像格式正確。它應該看起來更像是這樣的： background-image: url("paper.gif");或者給你提供這樣的例子：background-image: url("file:///E:/HTML_CODE/HexStars.png");

來源

2016-09-21 20:23:48

哈在發佈> _ <之後，我在css上意識到自己的錯誤。不過，我會嘗試這些位置設置。謝謝你的幫助:) –

使用這樣的

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％;

來源

2016-09-21 20:29:18 tsanchev

啊！溢出，多數民衆贊成我正在尋找！我肯定會嘗試其餘的。謝謝你的幫助：） –

無法將圖像定位在背景圖像上（Html，Bootstrap，CSS）

回答

相關問題