CSS可以实现在图片上显示数字,这对于各种网页设计非常有用。首先需要在HTML中添加一个图片标签,并为其设置一个CSS类。
<img src="example.jpg" class="number-image">
然后,在CSS中添加以下代码:
.number-image{ position: relative; } .number-image::after{ content: "1"; display: block; position: absolute; top: 20px; left: 20px; font-size: 20px; color: white; background-color: black; padding: 5px; border-radius: 50%; }
这个示例代码在图片的左上角添加一个白色数字1,数字的字体大小和背景色可以根据需要更改。在CSS中使用position属性来将数字定位在图片上,使用border-radius来制作圆形背景。
如果要在数字图片上显示不同的数字,只需要将::after选择器的content属性更改为需要的数字即可,例如:
.number-image::after{ content: "2"; }
这样就可以在同一张图片上显示不同的数字了。