Question

我有一个小问题，这是我的代码。

img {
  image-rendering: pixelated;
}

div.fight {
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
}

div.fight img.player {
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px;
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>

您可以在http://jsfiddle.net/ctwgkodp/11/上看到运行中的代码。（对不起，我的像素艺术很丑）

正如您在img中所看到的，我将应用程序中的所有图像都设置为像素化。问题是，当我设置background时，不能强制其像素化。

有什么方法可以强制像素化渲染到background的{{1}}？

谢谢您，祝您愉快。：）

Answer 1

您仅将image-rendering: pixelated应用于img标签。您还需要将其应用于.fight div：

img {
  image-rendering: pixelated;
}
div.fight{
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
  image-rendering: pixelated;
}
div.fight img.player{
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px; 
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>

实际上，您可以将image-rendering从img中完全删除，因为它将继承自父div。

div.fight{
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
  image-rendering: pixelated;
}
div.fight img.player{
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px; 
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>

渲染背景图像像素化的CSS

1 个答案: