分割和中心视口高背景图像

我有一个背景图像和两列内容的布局。这些列是视口高度的100％和视口宽度的50％（将屏幕分成两半）。背景图像也是视口高。分割和中心视口高背景图像

当我将右列进一步向右移动时，背景图像的该部分随之移动，在两半之间留下间隙。

一切正常，到目前为止，但我想有中心页面上的背景图片...

代码：

html, 
 
body, 
 
main { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.main-left, 
 
.main-right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    position: absolute; 
 
    top: 0; 
 
    background: url('https://unsplash.it/150/150'); 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
    box-sizing: border-box; 
 
} 
 
.main-left { 
 
    left: 0; 
 
    background-position: left 0; 
 
} 
 
.main-right { 
 
    left: 50vw; 
 
    background-position: -50vw 0; 
 
}

<body> 
 
    <div class="main-left"> 
 
    ...left content here ... 
 
    </div> 
 
    <div class="main-right"> 
 
    ...right content here ... 
 
    </div> 
 
</body>

JSFiddle

这是它现在的样子：

这是它应该如何看：

而这正是我希望能够用它做：

来源

2016-09-28 Johanness

把背景图像上你的身体，而不是主要左 –

......我将如何分割它呢？ – Johanness

真的不明白问题在哪里https://jsfiddle.net/r1fnncnd/1/ ....预期输出的屏幕截图将会很棒 – DaniP

给两列：与以前相同的尺寸视
设置这些pseudoelements的背景图像的尺寸伪元素你会在一个元素（在我的情况：100vh汽车;中心顶部 - 但封面或包含也会起作用）。
将右列移到视口的一半，然后向右移动：在元素返回相同量之前。
隐藏列

代码：

\t 
 
html, 
 
body, 
 
main { 
 
    height: 100%; 
 
    overflow:hidden; 
 
} 
 

 
.main-left, 
 
.main-right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 

 
.main-left { 
 
    left: 0; 
 
} 
 

 
.main-right { 
 
    left: 52vw; 
 
} 
 

 
.main-left:before { 
 
    content: ""; 
 
    z-index:-3; 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: url('https://unsplash.it/500/400'); 
 
    background-size: cover; 
 
} 
 

 
.main-right:before { 
 
    content: ""; 
 
    z-index:-3; 
 
    position: absolute; 
 
    left: -50vw; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: url('https://unsplash.it/500/400'); 
 
    background-size: cover; 
 
}

<body> 
 
    <div class="main-left"> 
 
    ...left content here ... 
 
    </div> 
 
    <div class="main-right"> 
 
    ...right content here ... 
 
    </div> 
 
</body>

来源

2016-09-28 19:33:12 Johanness

其实有一种方法可以达到你想要的效果，只用一个图像，但只限于图像是方形的。

只需使用background-position属性的四值语法;将background-position设置为-50vh，右侧为.main-left列，-50vh从左侧设置为.main-right列。

html, 
 
body, 
 
main { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.main-left, 
 
.main-right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    position: absolute; 
 
    top: 0; 
 
    background: url('https://unsplash.it/750/750'); 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
    box-sizing: border-box; 
 
} 
 
.main-left { 
 
    left: 0; 
 
    background-position: right -50vh top 0; 
 
} 
 
.main-right { 
 
    left: 51vw; 
 
    background-position: left -50vh top 0; 
 
}

<body> 
 
    <div class="main-left"> 
 
    ...left content here ... 
 
    </div> 
 
    <div class="main-right"> 
 
    ...right content here ... 
 
    </div> 
 
</body>

这里有一个JSFiddle。

更多关于background-position物业。

来源

2016-09-28 17:35:14 5aledmaged

谢谢5alsmaged，这就是我正在寻找的 - 除了有一个方形图像的可能性非常低。但它在我的路上迈出了一步;） – Johanness

分割和中心视口高背景图像

回答

相关问题