当先锋百科网

首页 1 2 3 4 5 6 7

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";
}

这样就可以在同一张图片上显示不同的数字了。