当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Weird artifacts with transparent png background-image in Chrome

问题描述:

I'm trying to create a pattern with a png with a transparent background. It works fine both on Firefox and Safari, but on Chrome it's displaying with some white space in between.

The code to reproduce the issue is quite simple:

div {

background: url('http://vps97368.ovh.net/montessori.it/wp-content/themes/montessori/images/pattern-bg.png');

height: 500px;

}

<div>blabla</div>

And I've created a pen to show it: http://codepen.io/anon/pen/RPGOyx

The pattern should display simple parallel diagonal lines, but on Chrome I see them like this:

I'm experiencing the issue on a retina display. Not sure about others.

网友答案:

Make the image bigger. I used 25x25 for this one:

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

div {
  background: url('https://s3-us-west-1.amazonaws.com/haven-images/pattern-bg.png');
  height: 500px;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: