響應式設計中的絕對定位圖像

我需要一些幫助。響應式設計中的絕對定位圖像

我目前正在開發一個即將響應的網站。
將張貼一個鏈接到該網站的psd圖像，所以你有一個想法
它應該是什麼樣子。
Link to screenshot of the site what it will look like
Link to the site itself
網站爲您縮放，你會看到船會做什麼

現在的問題網站擁有1200像素的寬度。

問題奠定了這艘船這img是1019x1732和絕對定位。並且需要這樣做是因爲我必須使用z-index才能將它定位在其他div上面，因爲它比較大。
我試圖把它作爲一個背景圖像和一個img標籤與它周圍的相對div。但沒有任何反應。

我的問題，如果我的問題很難理解。很難向其他人解釋問題，它總是讓我更感興趣。
這裏是我的代碼：

我的HTML

<div id="wrapperHero"> 

     <div id="hero"> 

      <p>The "Banarly Group" has been operating<br> 
       in Nigerian, Gabonese and Cameroon waters<br> 
       since 1995. 
      </p> 
      <div id="circle"> 
       <p>a fleet of<br> 
        <span class="number">24</span><span class="trawler">trawlers</p> 
      </div> 
     </div> 
     <div id="boat"> 
      <img src="img/BAN_herofg.png" alt="boat"> 
     </div> 

    </div>

我的CSS：

#wrapperHero { 
width: 100%; 
background-image: url(../img/BAN_herobg.png); 
background-repeat: repeat-x; 
min-height: 795px; 
margin-top: -23px;} 

#hero { 
max-width: 1200px; 
width: 100%; 
height: 100%; 
margin: 0 auto;} 

#boat { 
background-image: url(../img/BAN_herofg.png); 
background-repeat: no-repeat; 
position: absolute; 
height: 100%; 
width: 100%; 
z-index: 1; 
right: -6%; 
top: 240px;} 

#circle { 
border-radius: 50%; 
width: 18.3333%; 
min-height: 220px; 
background-color: #fff; 
background-color: rgba(255,255,255,0.2); 
float: right; 
margin: -230px 21.6666% 0 0;}

1：

來源

2014-05-07 user3401088

你還沒有解釋你的問題，只有網站的工作原理。 – Shakesy

好吧我的不好然後哈哈問題是，船隻不按比例縮放只是站在那裏的角落 – user3401088

和某些視口大小甚至消失後，我試圖解決這個問題，把圖像放在一個相對的div這是圖像只能在特定的視口大小之後移動。 – user3401088

可以使用的背景大小，背景，地位-X具有不同的媒體:)

#boat { 
background-size: 590px; 
background-position-x: 79px; 
} 

@media (min-width: 450px) and (max-width: 960px) { 
    #boat {background-size: //use different size; 
    background-position-x://use different size;} 
}

來源

2014-05-07 10:42:54

我會試試看。背景大小和最小寬度需要在％還是可以在px中。 – user3401088

不一定，但你也可以，如果你也想，它的一切都是關於你的需要:) –

-1

使用CSS媒體查詢爲您解決問題...

ex：

@media (min-width: 600px) and (max-width: 800px) { 
    html { background: red; } 
    }

來源

2014-05-07 10:38:51 Venkatesh

是的，我認爲這也是，但我是否會爲每個屏幕尺寸製作媒體查詢，因爲我的屏幕上的船是在正確的位置，但在老闆屏幕哪個更大，船更靠右 – user3401088

如果我有問題吧，這裏是你應該做的：刪除background-image財產從#boat 創建<img src="img/BAN_herofg">裏面設置max-width: 100%到<img>。

希望這會解決您的問題。

來源

2014-05-07 10:46:19 mms27

響應式設計中的絕對定位圖像

回答

相關問題