问题描述
我在这里尝试了解决方法:CSS background-size: cover + background-attachment: fixed clipping background images
和其他一些地方,但是它们工作不充分。顶部的JS解决方案:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position','left ' + ((scrolledY)) + 'px');
});
由于不断地重新定位,因此非常令人不快。另一个解决方案(responsive_calc
一个)无法正常工作,因为我希望它居中。解决方案始终将其对齐。
我基本上想要一个背景尺寸:封面;但固定的附件。
基于JS的解决方案很好,只要它在滚动时不计算即可。
您可以在此处查看此问题的演示:https://codepen.io/oscargodson/full/abZbZeE
应该看起来像这样
但是我明白了:
解决方法
考虑使用object-fict
和position:fixed
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.home-panel {
display: grid;
grid-template-columns: 50% 50%;
align-items: center;
height: 100vh;
}
.home-panel-media {
height: 100vh;
clip-path: inset(0); /* to clip the image to this div */
}
.home-panel-media img {
height: 100vh;
width: 50vw;
position: fixed;
top: 0;
right: 0;
object-fit: cover;
object-position: top center;
}
<div id="wrapper">
<div class="home-panels-wrapper">
<div class="home-panel home-panel-1">
<div class="home-panel-content">
<h1>Hello World</h1>
<p>
Lorem ipsum dolar gamet
</p>
<p>
</div>
<div class="home-panel-media">
<img src="https://i.pinimg.com/originals/a1/1e/2a/a11e2a9d5803e4dc2c034819ce12a16e.jpg">
</div>
</div>
<div class="home-panel home-panel-2">
<div class="home-panel-content">
<h1>Hello World</h1>
<p>
Lorem ipsum dolar gamet
</p>
<p>
</div>
<div class="home-panel-media">
<img src="https://images.squarespace-cdn.com/content/v1/56e05d74746fb93dcd805e8b/1553109528895-RYRDJLVNN61UDN65S59U/ke17ZwdGBToddI8pDm48kDmiacAi515_OfcChA6MRIQUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z23Oc3-AlX22j3PUzoYuTVI2MKzQWw7jmw4KYJnTQU-9E_twk1mUNduAk0T15_nZ7z/Tulsa-Headshot-Photographer_9639a.jpg?format=1500w">
</div>
</div>
</div>
</div>