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大小的效果是一样的?

clipboard.png

阅读 6.7k
3 个回答

应该把图片的分辨率调小一些

background-size: [ <length> | <percentage> | auto ]{1,2} | cover | contain
  • <length>:用长度值指定背景图像大小。不允许负值。

  • <percentage>:用百分比指定背景图像大小。不允许负值。

  • auto:背景图像的真实大小。

  • cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

  • contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

加一段
background-size:contain;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏