我在使用纯 CSS 实现视差网站时遇到了问题。问题在于它使用了 CSS 变换缩放来创建视差效果,这导致容器 div 内的图像和文本模糊不清。我尝试了 filter:blur(0) 等一些固定解决方案,但在 Firefox 中仍然无法修复。此外,图片滑块在浏览器页面左侧留下了一些像素。有人能帮帮我吗?您可以在页面顶部的徽标和菜单上看到问题。http://www.jeanclaudechiementin.com/etoile/index.html。
您可以使用相对大小属性,该属性会被子元素继承,而不是在视差的transform
中使用scale(...)
。例如,放大font-size
并省略scale(...)
:
html {
overflow-y: hidden;
}
body {
height: 100vh;
overflow-y: auto;
perspective: 1px;
}
.large {
font-size: 3em;
font-weight: bold;
}
.parallax.item {
font-size: 2em; /* scale with a relative sizing that gets inherited by child elements instead of using `scale()` in the `transform` property below */
position: absolute;
transform: translateZ(-1px); /* notice no scale() */
}
<html>
<body>
<div class="parallax item">
<div class="large">Hello!</div>
</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
<div class="large">Hello!!</div>
</body>
</html>
现在你遇到了相反的问题,至少在Chrome上:文本需要一些抗锯齿:P