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;

センタートップは背景を適切な場所に配置します。サイズは、アスペクト比を調整せずに 100% 幅で表示されます。フルサイズ（または別の背景画像）を表示するには、高さのdivを大きくする必要があります。

デモ

于 2015-08-05T11:59:32.573 に答える