我在将一个容器放置在另一个使用剪切路径的容器顶部时遇到问题。我尝试在任一容器上使用 z-index 但似乎没有帮助。
如果我从容器中删除剪切路径类，则块会在容器上愉快地滑动。我已经包含了我的问题的一个小提琴。
这是我的代码：
window.onscroll = function(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var para = Math.round(scrollTop / 1.2);
document.querySelector('#block').style.transform = "translate3d(0px," + para + "px,0px)";
}body {margin: 5px;}
#main {height:100vh;}
#below-main {height:100vh;}
#row1 {height:100vh;}
/* Paralellogram to slide underneath block
--------------------------------------------- */
#bluestripe {
height: 60vh;
width:60vw;
margin: 0 auto;
}
img {width: 100%;}
.clip-polygon {clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 60%);}
/* Block to sit above parallelogram
--------------------------------------------- */
#block {
height: 50px; …我试图使图像适合浏览器窗口的高度,并动态响应窗口大小.
我需要图像宽高比保持不变,但如果在大屏幕上观看,图像可能比原始分辨率大.
我不希望图像溢出屏幕外并产生一种掠夺效果.
图像必须在容器内部垂直和水平保持居中.