logo标签列表

纯CSS视差效果中使用transform scale时如何避免模糊效果

transformscaleparallax
4
我在使用纯 CSS 实现视差网站时遇到了问题。问题在于它使用了 CSS 变换缩放来创建视差效果，这导致容器 div 内的图像和文本模糊不清。我尝试了 filter:blur(0) 等一些固定解决方案，但在 Firefox 中仍然无法修复。此外，图片滑块在浏览器页面左侧留下了一些像素。有人能帮帮我吗？您可以在页面顶部的徽标和菜单上看到问题。http://www.jeanclaudechiementin.com/etoile/index.html。
1
这是一个被低估的隐藏陷阱，许多CSS3视差教程甚至都不提及。最终，JS是我的解决方案。 - Ricky Boyce
你的链接现在已经失效了。 - Matt Thomas
1个回答
0

您可以使用相对大小属性，该属性会被子元素继承，而不是在视差的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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接