jquery - 在角落显示图像，以便在调整窗口大小后图像保持在同一位置

Question

我正在HTML5使用 Jquery Mobile 构建一个移动应用程序，我想做的是显示 2 张图像，一张在右侧，另一张在左侧。重要的是在调整窗口浏览器大小时，图像不应该消失，并且始终显示在右侧和左侧，以便适应不同的移动屏幕。

我尝试使用 CSS : float:right, left:85%...

但是调整大小后它就消失了....

Answer 1

没有看到任何代码，我不确定你尝试了什么。但是您可以使用以下方法实现此目的：

<div style="position:fixed;left:0;"><img src="fakeimageurl.jpg" width="100" /></div>
<div style="position:fixed;right:0;"><img src="fakeimageurl.jpg" width="100" /></div>

或者，如果您希望图像不随滚动移动...

<div style="position:absolute;left:0;"><img src="fakeimageurl.jpg" width="100" /></div>
<div style="position:absolute;right:0;"><img src="fakeimageurl.jpg" width="100" /></div>

Answer 2

这是一个帮助您入门的示例。尝试重新调整浏览器的大小。

我建议使用 psuedobefore和after选择器来创建您的背景图像标记，因为这不是您在语义上希望出现在页面上的东西

基本标记：

<div id="main">
    Page content
</div>

基本 CSS：

#main { position: relative; z-index: 1 }
#main:before { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; left: 0; right: 50%;  }
#main:after { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; right: 0; left: 50%; }

,将元素拉伸到目标容器 ( ) 的整个高度，而 //占据top:0适当的一半。bottom:0#mainleftright 050%

现在设置背景图像before和after定义。您也可以使用缩放背景图像background-size，但这可能不是必需的。