css - Chrome 中带有透明 png 背景图像的奇怪工件

Question

我正在尝试使用具有透明背景的 png 创建图案。它在 Firefox 和 Safari 上都运行良好，但在 Chrome 上显示时中间有一些空白。

重现问题的代码非常简单:

div {
  background: url('http://vps97368.ovh.net/montessori.it/wp-content/themes/montessori/images/pattern-bg.png');
  height: 500px;
}

<div>blabla</div>

我创建了一支笔来展示它:http://codepen.io/anon/pen/RPGOyx

图案应该显示简单的平行对 Angular 线，但在 Chrome 上我看到它们是这样的:

我在视网膜显示器上遇到了这个问题。不确定其他人。

Answer 1

将图像放大。我为此使用了 25x25:

http://codepen.io/anon/pen/BNmVXQ

div {
  background: url('https://s3-us-west-1.amazonaws.com/haven-images/pattern-bg.png');
  height: 500px;
}