html - 带有背景图像的 div 下的多余细线

Question

我有下一个样式的 div:

.top-pattern {
  width: 1024px;
  height: 92px;
  background-image: url("https://s21.postimg.org/p0amqt8wn/pattern-top-big.png");
  background-repeat: repeat-x;
  background-size: contain;
}

它非常简单而且效果很好。但在某些设备(mac 和移动设备)上，div 下出现了奇怪的线条。这是什么？如何删除它？

示例:https://jsfiddle.net/wx92fb61/

截图:https://gyazo.com/3020d6720d27fcbd0315a55fce0fb016

附言我检查了我的图像数百次:图像中没有线条。

Answer 1

你的 css 必须是这样的，例如:

@media (min-width:768px;){
.top-pattern {
  width: 1024px;
  height: 94px;
  background-image: url("https://s21.postimg.org/p0amqt8wn/pattern-top-big.png");
  background-repeat: repeat-x;
  background-size: contain;
}
}

@media (max-width:768px;){
.top-pattern {
  width: 100%;
  height: 94px;
  background-image: url("https://s21.postimg.org/p0amqt8wn/pattern-top-big.png");
  background-repeat: repeat-x;
  background-size: contain;
}
}

在手机或平板电脑中，您最好将宽度设置为 100%，而不是像素值，然后您应该在 html 的头部添加一个初始比例，以捕捉设备的固定值。