在CSS中,我们可以很方便地对文字进行样式设置,比如改变字体、大小、颜色等等。但是,有时候我们也希望能在文字下面添加一张图片,比如说在文章中插入一幅图表或者插入一个小图标作为装饰,更好地展示文章内容。
<p>这是一段要添加图片的文字。</p>
p { position: relative; }
p::before { content: ""; display: block; width: 200%; height: 20px; background-color: gray; border: 1px solid white; position: absolute; bottom: -10px; }
p::before { content: ""; display: block; width: 200%; height: 20px; background-color: gray; border: 1px solid white; position: absolute; bottom: -10px; background-image: url("icon.png"); background-repeat: no-repeat; background-position: center center; }
<style> p { position: relative; } p::before { content: ""; display: block; width: 200%; height: 20px; background-color: gray; border: 1px solid white; position: absolute; bottom: -10px; background-image: url("icon.png"); background-repeat: no-repeat; background-position: center center; } </style> <p>这是一段要添加图片的文字。</p>
粉丝
0
关注
0
收藏
0