渲染背景图像像素化css

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，我不能强制它被像素化。

有没有办法强制像素化渲染到backgroundof div.fight？

谢谢你，祝你有美好的一天。:)

Answer 1

你只应用image-rendering: pixelated到img标签。您还需要将其应用于.fightdiv：

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>