在Safari中禁用平铺背景平滑

Question

Is there a way to disable background smoothing in Safari? I'm trying to make, for example, the tiled background like this:

 div#dashed { width: 10rem; height: 7rem; border: 1px solid #000; background: url("https://tut.etogo.net/_files/diagonalbg.png"); } 

 <div id="dashed"> 

So, the background is like that:

And I expect the background to look like that (zoomed):

But in Safari it looks like that: Zoomed:

So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?

Answer 1

I think this is because your background was repeat. You can try it background-size:cover; background-repeat: no-repeat; background-size:cover; background-repeat: no-repeat;

Setting size for your background-image.

Answer 2

As an alternative to using an image, you can achieve the same effect with pure CSS.

 .gradient { width: 200px; height: 200px; background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px); } 

 <div class="gradient"></div> 

You might want to fiddle around to reach the desired outcome.

A bit more info, and tips can be found on https://css-tricks.com/stripes-css/