.avatar {
position: relative
width: 100px
height: 100px
}
.avatar >img {
width: 100px
height: 100px
border-radius: 50%
}
.icon {
position: absolute
right: 0/*根据需要调整数值*/
bottom: 0/*根据需要调整数值*/
width: 50px
height: 50px
font-size: 14px
color: #fff
background-color: yellow
border-radius: 50%
}
<div class="avatar">
<img src="头像图片" >
<div class="icon">
<img src="图片" >
或者小图标
</div>
</div>
明白你的意思,你看其他网站是不是显示的正正好好的?那是别人用的图片的清晰度很高,拉伸后也可以显示正常,但是如你的图片本身质量就不高,那么我劝你,别找拉伸的代码,会显示的很糟糕的.所以,你换一张大图片是比较好的选择,如果你非要拉伸,代码是-------background-size:100% 100%
但是,还是劝你别这么做,真的不友好,太难看.
background:fixed
可以把背景图片固定住,不会随着滚动条移动.
