CSS渲染背景图片像素化

Question

CSS渲染背景图片像素化

7

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

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时，我无法强制其成为像素化。

有没有办法将div.fight的background强制呈现为像素化？

谢谢，祝您愉快。 :)

- Kyrbi

那个像素艺术真是太棒了。 - Quijibo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Turnip · Accepted Answer

您只将 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>

实际上，您可以完全从img中删除image-rendering，因为它会从父级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>