Question

我已经看过许多禁用图像抗锯齿的方法，但是如何将其应用到＆＃34;背景图像＆＃34;？我有一个带有背景图像的div，而别名代码并没有使用它。有人可以帮忙吗？

Answer 1

您是否在背景图片div的image-rendering: pixelated;上尝试了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>

HTML禁用背景图像上的抗锯齿功能

1 个答案: