iT邦幫忙

0

在不破壞class等於center-block img-responsive特性的情況下 如何讓兩圖片水平置中置頂又重疊

eden1762 1 周前2367 瀏覽

各位大大您好,center-block img-responsive這個class可以水平置中又置頂,那請問如何讓下列兩圖片在不破壞center-block img-responsive這個class特性的情況下,讓兩圖片重疊,謝謝各位大大!

<img alt="海洋展覽館" id="imgT1" class="center-block img-responsive"  src="MasterImages/1170px-b.jpg">
<img alt="海洋展覽館" id="imgT2" class="center-block img-responsive"  src="MasterImages/1170px-bText.png" />
窮嘶發發發 iT邦高手 1 級 ‧ 1 周前 檢舉
請說明 center-block img-responsive 這兩個的 CSS 內容,因為這個會關係到後面的作法會不會有所衝突
窮嘶發發發 iT邦高手 1 級 ‧ 1 周前 檢舉
最簡單的做法是在兩張圖的 ID 下 Z-INDEX,如果你這兩個 CLASS有直接定位,那他就會直接重疊
如果沒有直接定位,那在ID這裡就要再做一次定位

1 個回答

1
king742171
iT邦新手 4 級 ‧ 1 周前

可能要請eden1762
去找這個CSS檔
然後在這個CSS檔分別搜尋center-block與img-responsive
這需要看這兩個CSS設定了那些屬性
如此才能避免發生衝突

就我所知~
想要水平可以利用float:left 或 float:right 或 display:inline-block...
想要置中可以利用display:block 以及 margin-left:auto、margin-right:auto
想要置頂可以利用position:fixed 以及 margin-top:0px
想要重疊得要有圖層概念..可以利用position:absolute 以及 z-index:???

特別說明..
z-index就是所謂第三軸
以你的問題來看..
一張圖片設定 1 ..一張圖片設定 2 ..就可以讓圖片重疊~
當然..要實現z-index一定要搭配position:absolute(設定絕對位置)

eden1762 iT邦新手 5 級 ‧ 1 周前 檢舉

img-responsive 與 center-block 內容如下,我有設定position等於absolute與z-index、left,不過position設定之後img下面的div也會浮上來置頂,無法保持在img下面,left設定之後放大縮小會無法置中。再設定width,可以置中,但是無法放大或縮小。請問各位大大如何解決,謝謝!程式碼如下:

<style>
#imgT1{
/*調整*/
            position:absolute;
            z-index:0;
            left:10%;
            width:80%;
	/*img-responsive*/
            display: block;
	max-width: 100%;
	height: auto;
    /*center-block*/
	display: block;
	margin-right: auto;
	margin-left: auto;
        }
        #imgT2{
/*調整*/
            position:absolute;
            z-index:1;
            left:40%;
             width:20%;
	/*img-responsive*/
   display: block;
	max-width: 100%;
	height: auto;
    /*center-block*/
    display: block;
	margin-right: auto;
	margin-left: auto;
        }
</style>       
king742171 iT邦新手 4 級 ‧ 1 周前 檢舉

抱歉...我的錯~= =
忘了absolute使用後
margin在本身的標籤上會有跟沒有一樣
如此就不會置中了~~

建議..將兩個img分別用兩個div包起來
例如:

<div> <img alt="" id="imgT1" class=""  src="..."> </div>
<div> <img alt="" id="imgT2" class=""  src="..."> </div>

然後把你調整來重疊的屬性
另外丟出來給div用

也就是說真正做重疊這件事的是div
而img自己則處理置中與水平排放

順道一提..
置頂的部分..本身與position有關聯
所以相關位置屬性~就必須由div處理~

對了~!!!!
我自己測試你的程式時...
我並沒有用到left這個屬性..
理論上...你要置中的話...
就不會用到left這個屬性~
所以...我不懂為何你要使用他...0..0

king742171 iT邦新手 4 級 ‧ 1 周前 檢舉

突然想到...
使用了position:absolute;後..
因為margin失效了..
因此...如果想要移動元件位置..
確實是需要left 或 right 屬性(當然還有top 以及 bottom 屬性)
不過這四個屬性在調整位置上..
就不像margin一樣那麼方便調整了~
自己實驗玩玩看就可以感覺到了~
/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答