在HTML頁面上浮動一個gif圖像

Question

我想要一個GIF保持在頁面的中心，而不管用戶在哪裏滾動。我希望那裏有一個錯覺，那就是圖像'漂浮在頁面上方'而不是它上面。

我相信CSS會是這樣做的方式嗎？假設有一個名爲foo.gif的圖像，CSS會做什麼？

Answer 1

沒有你想要什麼更具體的指導，爲什麼呢，我能提供的最好的是：

img { 
    position: fixed; /* forces the element to stay fixed in relation to the viewport */ 
    top: 50%; /* sets the top of the image 50% of the page height */ 
    left: 50%; /* sets the left side of the image 50% across the page */ 
    margin-left: -100px; /* moves the image half of its own width to the left-side of the page */ 
    margin-top: -93px; /* moves the image half its height 'up' the page */ 
    box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating' 
    border-radius: 1em; 
} 

JS Fiddle demo。

Answer 2

它與iiz的解決方案，如果您更改position:absolute至position:fixed。

我創建了一個jsfiddle供您查看。

我還包括一個陰影（from here），使圖像「浮動」。

這一切都有點粘在一起，但它會工作，你可以在你希望的任何方式改變它...