0

我有这样的情况：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 的开头。使用任何带有 background-size:cover 的解决方案都不适合我，因为我将避免图像拉伸。非常感谢您的帮助，因为我对此有所帮助并且找不到可行的解决方案。在此先感谢！在此处输入代码

4

3 回答 3

1

试试jquery

posBg();
$(window).resize(function() {
        posBg();
 })

function posBg(){
var posLeft=$('#about-stat').offset().left;
    var posTop=$('#about-stat').offset().top;
$('#about-stat').css("background-position", posLeft+"px "+posTop+"px");
}

小提琴演示http://jsfiddle.net/5axmtw9g/9/

于 2015-08-05T13:39:41.980 回答
0

我认为您可以通过将背景调整为以下内容来实现您想要的：

  #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 center top ;
  background-size: 100% auto;

center-top 会将背景定位到正确的位置。大小将在不调整纵横比的情况下以 100% 的宽度显示。现在你只需要一个更大的高度 div 来显示它的全尺寸（或不同的背景图像）。

演示

于 2015-08-05T11:59:32.573 回答
0

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

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);
}
于 2017-10-20T16:17:04.527 回答