Question

我正在使用jQuery Mobile开发手机应用程序。我将背景图像设置为以下DIV :(在页面渲染后从开发人员工具中复制代码）

<div data-role="page" id="create_member" data-dom-cache="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="height: 568px;"><div data-role="content" class="ui-content" role="main">

CSS：

#create_member {
  background-image: url("../images/common/bg.png");
   background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
 }

bg.png是640x1136背景，适合iphone5尺寸。

它下面有一个横幅：

  <div class="banner">

        <div class="bannerbg"><img src="skin/images/red_banner.png" \=""> </div>

   </div>

CSS：

#create_member .banner {
margin-top: 34%;
}

.bannerbg {
 border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
background: #ffe6b8;
}

.banner img {
width: 97%;
margin-top: 5px;
}

然而，当我尝试向下滚动页面时，我发现这个背景是固定的，横幅可以向上移动而不是这个背景。

如何让横幅与背景一起坐下，当向上滚动设备时，它们会一起移动？

Answer 1

根据我的理解，您希望使用background-image CSS 属性来选择图像，然后附加某种横幅。请参阅此Fiddle以确认这是否是您要查找的行为。你缺少的是让你的父元素包含relative 定位，你的子元素包含absolute 定位。

为什么我们使用横幅的绝对定位

在绝对定位模型中，框相对于其包含块显式偏移 - w3

为什么我们需要包含块的相对定位

相对定位的框为绝对定位的后代建立一个新的包含块。 - w3

如果您没有relative 定位，那么您的横幅广告将会跟随body包含包含块。在这两个 postioning 属性之后，诀窍是在bottom使用left，right和0px将其作为横幅标记在父的底部，同时仍然使用它自己的内容缩放高度。

.banner {
    position:relative;
}

.bannerbg {
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

不确定它是不是您要找的东西。让我知道，如果我没有得到它，我可以调整我的答案！： - ）

背景图片无法提升内容

1 个答案: