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

如果您将position:absolute更改为position:fixed，则可以使用 iiz 的解决方案。

我为你创建了一个jsfiddle。

我还包括一个投影（from here）以使图像“浮动”。

它们都粘贴在一起，但它会起作用，你可以用你希望的任何方式改变它......

在HTML页面上浮动gif图像

2 个答案: