多余的细线与背景图像

我已经分度，未来风格：多余的细线与背景图像

.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.我检查了我的图像100次：图像中没有任何一行。

来源

2017-04-01 Crabar

你的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来捕捉设备的固定值。

来源

2017-04-01 08:00:47

它没有修复一个错误，我仍然在我的Mac上看到这条线。 – Crabar

为该行添加一个屏幕截图 –

我已添加为该帖子的更新。 – Crabar

请参阅，如果您可以重写此CSS类并删除盒阴影。我认为这是让你的边界。

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

来源

2017-04-01 13:50:05

我试图将这个CSS添加到我的div，但没有任何改变。 – Crabar

多余的细线与背景图像

回答

相关问题