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>