位置圖像到背景

我正在爲我的女朋友的網站工作。但我卡住定位的標誌。位置圖像到背景

這裏是我談論的網站：

http://xntriek-test.s3-website-eu-west-1.amazonaws.com/

我嘗試使用Z-指標，但不起作用。我也嘗試爲身體設置背景圖像。但是，然後我要限制大小的圖像。我正在使用Twitter bootstrap將這件事放在一起。

目前，這是我使用的標誌類：

.logo{ 
    position: absolute; 
    top: 25px; 
    left: 25px; 
    height: 45%; 
    width: 30%; 
    z-index: 1; 
}

在我沿着側跨度的主要內容定位圖像的時刻。但是因爲我使用的是position：絕對的，如果我把它放在一起，這不會有什麼不同。

如果任何機構有任何想法我可以如何解決這個問題，也許是一種不同的方法，那麼我現在就在做。任何幫助歡迎！

2013-04-22 Niels

你想在哪裏定位標誌？ – Justin 2013-04-22 20:06:50

當我檢查它時似乎正在移動。另一個說明，你確定你想按這樣的百分比來確定標誌的大小嗎？當我縮放頁面時，它似乎傾向於各種奇怪的形狀。 – Eric 2013-04-22 20:09:29

使用''作爲徽標似乎不是一個好主意。 – 2013-04-22 20:11:02

您需要遵循以下修改CSS：

<div class="span6 offset3" style="position: relative; z-index: 1">

z-index影響定位的元素，因此只需添加position: relative您感興趣的跨度。

我會創建一個特殊的類「z-wrap」並修改樣式表。

<div class="span6 offset3 z-wrap">

在CSS樣式表：

.z-wrap {position: relative; z-index: 1}

注意您可能需要調整取決於你可能有任何的z-index值的z-index的值設置在標誌容器中。

2013-04-22 20:11:03

首先，你用css扭曲了logo，如果你希望你的圖片能夠響應，將它放置在一個響應元素中，定位這個絕對值並讓圖像調整它的大小。

#logoContainer { 
position:absolute; 
top:25px; 
left:25px; 
width:30%; 
z-index:-1; 
}  

img.logo{ 
width:100%; 
height:auto; 
}

你的HTML應該是這個樣子：

<div id="logoContainer"> 
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" /> 
</div>

把事情處理好自己的身體標記通車後，而不是在一些其他元素。通過將其放入其他元素中，徽標會繼承其z-索引，並且您只能影響它在父級內的z-定位，而不會影響整個頁面。

僅在使用它們的「position」屬性放置的元素（相對的，絕對的或固定的），可以由「z索引」的影響：

2013-04-22 20:08:29 xate

一件事使用z-index屬性時要記住。

所以如果你想解決你的問題，要麼把你的標誌作爲背景圖片，要麼在內容的CSS中使用位置。

2013-04-22 20:09:04 RelevantUsername

回答