问题
I encountered strange behavior in Chrome v60.0 when I placed a downscaled image on top of itself and set the CSS image-rendering
parameter to pixelated
:
#container {
position: relative;
width: 160px
}
.image {
width: 100%
}
.overlay {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
image-rendering: pixelated
}
<div id="container">
<img class="image" src="http://www.publicdomaintreasurehunter.com/wp-content/uploads/2011/01/muscle.jpg">
<img class="overlay" src="http://www.publicdomaintreasurehunter.com/wp-content/uploads/2011/01/muscle.jpg">
</div>
Rather than appearing pixelated, as expected, the image is smooth (and sharper than the original). Normally when pixelated
is applied, the image looks quite grainy (see below).
You can test this by removing the 1st image in the container and comparing the result. Or removing the 2nd to see the default rendering.
One caveat, however. While it might work great for photos, there is jaggedness on some edges when artwork is used. One workaround is to go in between and apply an opacity of 0.4 or so on the overlayed image, giving at least some sharpness.
Any explanation for this behavior? It doesn't work in IE or any other browsers I've tried.
UPDATE: I tested this in the following 32-bit and 64-bit versions of Chrome and here are the results:
60.0.3112.113 (64-bit) - Works
60.0.3112.101 (64-bit) - Works
59.0.3071.86 (64-bit) - Works
58.0.3029.96 (64-bit) - Not necessary to use hack, since image-rendering: pixelated
already displays the sharpened image without pixelation
58.0.3029.96 (32-bit) - Not necessary to use hack, since image-rendering: pixelated
already displays the sharpened image without pixelation
57.0.2987.133 (64-bit) - Not necessary to use hack, since image-rendering: pixelated
already displays the sharpened image without pixelation
56.0.2924.87 (64-bit) - Does not work
55.0.2883.75 (64-bit) - Does not work
53.0.2785.116 (32-bit) - Does not work
48.0.2564.109 (64-bit) - Does not work
回答1:
This isn't unique to CSS. Noise/grain does tend to create an illusion of sharpness or enhanced detail due to the pixels making edges more pronounced, among other things. Many sharpening techniques end up increasing the amount of noise, which is usually an undesired side effect, though very careful and very subtle application of noise to an image can create this illusion without noticeably degrading image quality.
See also: Why is there the illusion of detail in photographic noise?
来源:https://stackoverflow.com/questions/45872640/weird-css-hack-for-sharpening-images-chrome-59-and-60-only