并排视差图像，同时保持纵横比
我试图完成将两个视差background-image并排放置，同时保持它们的纵横比。我遇到的问题是每个图像似乎都被垂直切成两半。我尝试在两者中使用不同的值，background-attachment但 background-size没有成功。从下面的代码中删除background-attachment: fixed;可以解决纵横比问题，但会失去视差效果。有谁知道如何同时完成两者？
.image-left {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="image-left"></div>
<div class="image-right"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
在这里 小提琴上面的代码。
我还尝试使用这篇文章中的 jQuery 函数，但无法让它与并排图像一起使用。（参见小提琴）
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
PIPIONE3回答
-
千巷猫影
正如其他人指出的那样，我认为你不能通过背景图像实现你的目标......因此，我尝试了另一种方法，该方法基本上包括： - 有两个部分：一个用于图像，另一个用于内容。- 对于图像，将它们包装到一个元素中并使用固定位置。它们位于元素的最顶部，如果您想更改它，可以使用top属性。- 至于内容，两个区域也都包装在一个绝对位置的容器中。- 底部的内容将负责图像中的“呼吸”空间，因此，您需要进行操作margin-top才能达到预期的效果。一些注意事项： - 给定的示例目前仅适用于台式机，在全屏笔记本电脑（宽度约为 1680px）上进行了测试。- 如果缩小屏幕，一切都会变得非常糟糕，因此，您将需要通过媒体查询调整移动设备的所有措施。- 底部元素有一个 min-height 属性，仅用于演示目的。综上所述，我不太确定这是否是我会推荐的东西。你真的可以将两张图片合并为一张吗？这样就可以直接使用后台的方式，就不需要这样的开发了。我不喜欢我的方法，因为它包含很多位置的固定值，最终，这会引入可维护性问题。我希望它有帮助！.image-wrapper { position: fixed; top: 0; width: 100%; display: flex; flex-flow: row nowrap;}.image { width: 100%;}.content-wrapper { position: absolute; top: 0; left: 0; right: 0;}.content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange;}.content-bottom { margin-top: 300px; min-height: 1000px;}<div class="image-wrapper"> <img class="image" src="https://www.gstatic.com/webp/gallery/1.webp"> <img class="image" src="https://www.gstatic.com/webp/gallery/2.webp"></div><div class="content-wrapper"> <div class="content"> <h1>Lorem</h1> </div> <div class="content content-bottom"> <h2>Ipsum</h2> </div></div> -
犯罪嫌疑人X
最好的方法是为图像提供一个固定位置的容器。这是我的解决方案，使用这个想法，但无需调整大小即可工作请注意，由于现在图像仅覆盖屏幕宽度的一半，因此它们也将覆盖高度的一半。如果图像处于纵向模式，则可以修复此问题。为了使用当前图像获得更好的结果，我添加了另一行图像，现在顺序颠倒了（仅对某些屏幕比例可见）.images { position: fixed; width: 100%; z-index: -1;}.images div { display: inline-block; width: 49%; margin: 0; height: 500px; background-position: center; background-size: cover;}.image-left { background-image: url('https://www.gstatic.com/webp/gallery/1.webp');}.image-right { background-image: url('https://www.gstatic.com/webp/gallery/2.webp');}.content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange;}.filler { height: 500px;}<div class="images"> <div class="image-left"></div> <div class="image-right"></div> <div class="image-right"></div> <div class="image-left"></div></div><div class="content"> <h1>Lorem</h1></div><div class="filler"></div><div class="content"> <h1>Ipsum</h1></div> -
holdtom
.flexrow { display: flex; flex-flow: row wrap;}.flexrow > .image { flex: 0 1 50%; min-height: 350px; background-size: 100%;}.img1 { background-size: cover; background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;}.img2 { background-size: cover; background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;}.content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange;}<div class="content"> <h1>Lorem</h1></div><div class="flexrow"> <div class="image img1"></div> <div class="image img2"></div></div><div class="content"> <h1>Ipsum</h1></div>认为这就是您正在寻找的，请记住，当没有可用空间（调整大小、低分辨率时）时，图像上的 min-height 属性可能会破坏此纵横比。
随时随地看视频慕课网APP
相关分类
Html5