Question

我在使用::之前遇到了小问题...我在我的div内容之前添加了一个小三角形以使它更加花哨，我有动画背景我发现在低分辨率（特别是在手机上）有一些奇怪的线条，我无法摆脱。

这是我的代码

#thirdScreen::before{
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 50px 90vw 0 10vw;
  border-color: transparent #E3E3E3 ;
  background-attachment: fixed;
  background-image: url(https://media.giphy.com/media/kW6O6ozGQnqzm/giphy.gif);
  background-size: contain;
}

这是我在看电话时看到的情况：
inspect with Galaxy S5 360x640

这是一个codepen：
https://codepen.io/anon/pen/bWmWEL

如果有人能告诉我我能做些什么，那将非常有帮助谢谢！

Answer 1

关于渲染。您在::before中创建的三角形正在将您的部分悬停在距离顶部相同的像素上，在某些分辨率中您可能会看到一个像素差异，这就是为什么有边框的原因。解决方法是简单地添加margin-top：-1px;

#secondScreen::before {
    margin-top: -1px;
}

在手机上使用::之前的CSS问题

1 个答案: