css中，图片大小与背景的大小不一样怎么处理？
背景图片大小时200 200，但是用于显示背景的区域大小只有20 20，我的源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="demon">
<i class="announce"></i>
</div>
</body>
</html>
<style>
*{
margin: 0 ;
}
.demon{
width: 20px;
height: 20px;
background: url("./images/announce.png") center center no-repeat;
background-size: 20px;
}
</style>
这样设置样式后，看起来图片不清晰，如何修改下样式，使图片看起来和200*200大小的效果是一样的?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
应该把图片的分辨率调小一些
<length>：用长度值指定背景图像大小。不允许负值。<percentage>：用百分比指定背景图像大小。不允许负值。auto：背景图像的真实大小。cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。加一段
background-size：contain;