2015-05-19 112 views
0

我想設置固定的圖像我有一個移動視圖頁面的頂部位置設置位置固定

enter image description here

.fixed { 
    position: fixed; 
    } 

這與離子

<div class="item item-image polygon"> 
    <img src="http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg" 
     class="fixed"> 
</div> 

這裏是我需要的,但固定

enter image description here

UPDATE

這裏是一個JSBin,我已經把它貼在圖像的背景,但我無法看到圖像http://jsbin.com/puxavoveci/2/edit?html,css,output

+0

你是什麼意思_...但固定?_它不固定?你需要添加一些座標:'top:0'等? –

+0

@KevinBoucher查看更新:) – TheUnnamed

回答

0

CSS:

.fixed{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

試試這個。希望這可以幫助。

但我想把圖像作爲只有img不會得到您想要的輸出。我認爲你需要把這個圖像放在div中,並將其作爲背景圖像,並給出一個CSS的background-attachment: fixed;

或者,你可以請爲你的html結構提供一些小提琴。只是想看看它和增強我的回答更相關的一個

編輯:

CSS:

.fixed { 
    background-image: url('http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg'); 
    background-attachment: fixed; 
    width: 100%; 
    height: auto; 
    min-height: 400px; 
    background-size: cover; 
    background-position: center; 
    overflow: hidden; 
    background-repeat: no-repeat; 
} 

我說得對與我有針對性的課嗎? :)希望這會工作。

+0

你可能是正確的背景/ div的東西。我可以修復圖像,但只能使用'width:100vh'來拉伸它。 –

+0

你的意思是背景圖像可以通過給予'div'寬度:100%的CSS來進行伸展;'?我認爲你可以通過給div一個'background-size:cover'的CSS來展開背景圖片;' – John

+0

沒有拍攝圖片,這裏是Plunker http://plnkr.co/edit/9tYTPM7DaRfn2QY41UOz?p=preview – TheUnnamed

0

試試這個。測試錯誤。

z-index:-1將使其位於頁面其餘部分下方1層,以便其他內容將在其上滾動。

.absolute { 
     position: absolute; 
     top:0px; 
     left:0px; 
     width:100%; 
     z-index:-1; 
      } 
    <div class="item item-image polygon"> 
     <img src="http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg" 
      class="absolute"> 
    </div> 
+0

圖片消失 – TheUnnamed

+0

試試這裏http://jsbin.com/puxavoveci/2/edit?html,css,output – TheUnnamed

+0

試試吧z-index的。我剛添加它。沒有意識到你想讓頁面內容在其上滾動。 –