时间戳

首页 > 解决方案 > 渲染背景图像像素化 css

html - 渲染背景图像像素化 css

问题描述

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

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？

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

标签： htmlcss

解决方案

您只是将 应用于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它将继承自 parent 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>

推荐阅读