Question

我使用纯css的视差网站有问题问题是它使用css变换比例来创建视差效果，这会对图像和容器div内的文本缩放产生模糊效果。
我已经尝试过滤：blur（0），以及我在网上找到的其他固定解决方案，但没有什么可以在Firefox中修复它。
此外还有另一个问题，图片的滑块在浏览器页面的左侧留下了一些像素。
有人能帮助我吗？

http://www.jeanclaudechiementin.com/etoile/index.html

您可以在徽标和页面顶部的菜单上看到问题

Answer 1

您可以使用子元素继承的相对大小属性，而不是在视差scale(...)中使用transform。例如，按比例放大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

使用变换比例时，防止纯css视差中的模糊效果

1 个答案: