Question

我遇到这样的情况：http://jsfiddle.net/5axmtw9g/3/

<div class="content inner clearfix1 has-left-sidebar">
    <div class="sidebar-left-menu prepended"></div>
    <div class="content-middle">
        <section id="about-stat" class="clearfix1 about-stat-section">
            <h1>Some title</h1>
        </section>
    </div>
</div>
.inner {
  margin: 0 auto;
  width: 600px;
}
.content.inner {
  position: relative;
}
.content .sidebar-left-menu {
  height: 100%;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  float: left;
  width: 160px;
}
.sidebar-left-menu {
  background: #3b86c4 none repeat scroll 0 0;
  color: #fff;
}
.content-middle {
  margin: 0 0 10px 170px;
}
#about-stat {
  background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat fixed 0 0;
  height: 590px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
}

正如您在小提琴中看到的那样，固定背景图像位于窗口而不是包装器。我希望图像定位在“content-middle”div的开头，正如预期的那样。使用任何具有背景尺寸的解决方案：封面对我来说不起作用，因为我将避免图像拉伸。我真的很感激你的帮助，因为我无法找到合适的解决方案。提前致谢！在此处输入代码

Answer 1

尝试jquery

UINavigationController

小提琴演示This is also a good suggestion on how to parse

Answer 2

我认为你可以通过调整背景来实现你想要的目标：

 foreach ($cssArray as $csses) {
        $output .=  $csses => $css;
    }

中心顶部会将背景定位到正确的位置。尺寸将以100％宽度显示，而不调整纵横比。现在你只需要一个更大的高度div来显示它的全尺寸（或不同的背景图像）。

<强> Demo

Answer 3

背景图片X AXIS是其兄弟容器宽度的一半加上

https://codepen.io/AliKlein/pen/dVrmVO

section {
    height: 100vh;
    background-image: 
    url(https://source.unsplash.com/collection/194676/3);
    background-size: cover;
    background-attachment: fixed;
    background-position-y: center;
    background-position-x: calc(50% + 12.5vw);
}

背景附件固定到包装div

3 个答案: