html - header 问题 - CSS 变换(视差)

Question

这是我的视差标题。问题是使用 transform 属性来获得更好的视差效果，整个标题变大并超出了边界。我该如何解决这个问题？

header {
    border:none;
    color:black;
    background-image:url('<?php echo $imgURL ?>');
    height:100vh;
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment:fixed;
    transform: translateZ(0px) scale(1.1);
    z-index:0;
    overflow: hidden;
}

Answer 1

虽然如果不查看您的 HTML 或 JSFiddle 就很难判断，我敢打赌问题出在这个属性上:

header {
    ...
    transform: ... scale(1.1)
    ...
}

由于 header 元素(很可能)是 block 级元素，因此它占用了可用的最大宽度空间。然后你将它放大 10%，它变得比它的容器还大。无论如何，这是我的赌注。