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

P.S。我检查了我的图像数百次：图像中没有线条。

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的head部分添加一个初始比例来捕捉设备的固定值。

Answer 2

请参阅，如果您可以覆盖此CSS类并删除box-shadow。我认为这就是让你获得边界的原因。

.image-box-component .image-viewer {
     box-shadow: 0 0 0px rgba(0,0,0,0) !important;
}

在div下的多余的稀薄的线与背景图象

2 个答案: