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

Question

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

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

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

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

Answer 1

Mat*_*mas 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() */
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

现在你遇到了相反的问题，至少在 Chrome 上：文本需要一些抗锯齿处理：P

归档时间：	9 年，8 月前
查看次数：	843 次
最近记录：	6 年，11 月前