2013-10-24 67 views
1

這是我的導航欄,由背景圖像上的某些鏈接組成。我已經定位了圖像使用:放大時將背景圖像和文字放在一起放大

background-position: x% y%; 

當我調整或縮放頁面時,圖像和鏈接的位置改變。正因爲如此,這些鏈接進入了照片中的植被,而對比度使它們無法讀取。那麼,是否有辦法將鏈接和圖像組合在一起,以便讓我保持在我以100%縮放時聲明background-position: x% y%;的位置?

enter image description here

+0

嘗試使用像素而不是百分比? – j08691

+0

@ j08691是的---也許更好一點,但絕對不可用。 – Aurelius

+0

你有沒有設置背景大小:100%? – Chausser

回答

1

我會找出其中植被左邊開始,看上去約10%。然後有這樣的事情:

.background { 
    background-position: left center; 
    background-size: 100% auto; 
} 
.text-wrapper { /*Some wrapper around the header and links, alternatively you could use something like h1, a:first-child */ 
    margin-left: 10%; /* the value of this being the % that the vegetation starts */ 
} 
+0

我已經做了一個筆向你展示問題:http://codepen.io/anon/pen/qdDio – Aurelius

+1

@FormlessCloud我在代碼筆中添加了一些代碼 - 其中一些是讓它看起來像原來的問題,其餘的是更新CSS。明智的CSS,這是關於你可以做的最好的,更重要的是,你將不得不使用JavaScript。它的響應低至約600px寬 – cadlac

+0

你保存了codepen嗎?因爲我看到只是我的舊代碼... – Aurelius