我正在尝试使用具有透明背景的 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 上我看到它们是这样的:
我在视网膜显示器上遇到了这个问题。不确定其他人。
最佳答案
将图像放大。我为此使用了 25x25:
http://codepen.io/anon/pen/BNmVXQ
div {
background: url('https://s3-us-west-1.amazonaws.com/haven-images/pattern-bg.png');
height: 500px;
}
关于css - Chrome 中带有透明 png 背景图像的奇怪工件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30413896/