在CSS中,我们可以很方便地实现在文字前面插入图片的效果。这个特性在网页设计中非常常见,例如在论坛帖子中,用户头像常常被放在用户名的前面。为了实现这个效果,我们需要将图片作为文本的背景,可以用back
p { padding-left: 30px; /* 文本往右偏移,为图片预留空间 */ background-repeat: no-repeat; /* 防止图片平铺 */ background-position: left top; /* 图片居左 */ background-size: 20px auto; /* 图片的大小为20px x 20px */ margin: 10px 0; /* 上下外边距为10像素 */ } p:before { content: ""; /* 伪类内容为空,只用于插入图片 */ display: inline-block; background-image: url("image.png"); /* 图片地址 */ width: 20px; /* 图片的大小为20px x 20px */ height: 20px; margin-right: 20px; /* 图片和文本之间的距离为20px */ }
粉丝
0
关注
0
收藏
0