将其用作背景图像后图像不太清晰答案

【问题标题】：image is not so clear after using this as background image将其用作背景图像后图像不太清晰
【发布时间】：2018-06-21 07:15:04
【问题描述】：

原始图像位于文件夹中，并由background-image CSS 属性访问，以在div 中用作背景图像。但它看起来与原始图像不同。我试过 CSS3 cover、image-rendering 等来解决这个问题，但输出仍然没有变化。我也尝试了 CSS3 过滤器，但没有任何改变。

原图

图像作为 div 背景

我试过的代码：

width: 48px;
height: 48px;
background-image: url(img/15294860.jpeg)

【问题讨论】：

看起来您正在缩放图像（因为它是 200x200 图像，但您指定了 48x48），因此它被重新采样，这绝不是一件好事。以原始大小使用它。
是的！ , 原始图像大小为 200x200 并固定为 DIV 大小 48px , 48px 任何替代如果我正在寻找解决相同的问题而不是使用图像原生大小
在具有良好重采样算法（Photoshop、GIMP 等）的外部程序中将图像大小调整为 48x48，然后改用它。

标签： jquery html image css

【解决方案1】：

检查下面的 sn-p 我认为它看起来很合适。只需添加 background-repeat: no-repeat;删除重复图像。

.image {
  width: 48px;
  height: 48px;
  background-image: url('https://i.stack.imgur.com/Aa1XR.jpg');
  background-repeat: no-repeat;
    background-size: cover;
}

&lt;div class="image"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

.background {
  width: 48px;
  height: 48px;
  background: url("https://vignette.wikia.nocookie.net/lego/images/1/16/Harrypottery5-7-200x200.jpg/revision/latest?cb=20111021110949")no-repeat;
    background-size: cover;
}

&lt;div class="background"&gt;&lt;/div&gt;

【讨论】：