HTML在背景图像上禁用抗锯齿

Question

我见过很多禁用图像抗锯齿的方法，但是如何将其应用于“背景图像”？我有一个背景图像的div，并且别名代码不能使用它。有人不能帮忙吗？

Answer 1

你试过image-rendering: pixelated;对你的背景图片div的Class？

如果没有，你可以尝试在CSS-Tricks

本教程这里是夏日。 原始作者

.pixelated { 
 
     image-rendering: pixelated; 
 
} 
 

 
.resize { 
 
    width: 45%; 
 
    clear: none; 
 
    float: left; 
 
} 
 
.resize:last-of-type { 
 
    float: right; 
 
} 
 
.resize img { 
 
    width: 100%; 
 
} 
 

 
img { 
 
    margin-bottom: 20px; 
 
    max-width: 100%; 
 
} 
 

 
body { 
 
    background-color: #444; 
 
    color: #fff; 
 
    padding: 2em; 
 
}

<div class="original"> 
 
    <h1>Original image size</h1> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" /> 
 
</div> 
 
<div class="resize"> 
 
    <h2> 
 
    <code>image-rendering: auto;</code> 
 
    </h2> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" /> 
 
</div> 
 
<div class="resize"> 
 
    <h2> 
 
    <code>-rendering: pixelated;</code> 
 
    </h2> 
 
    <img class="pixelated" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" /> 
 
</div>