css在图片上添加小红点数字

CSS是前端开发中不可缺少的一项技能，可以帮助我们实现各种视觉效果。在图片上添加小红点数字也是CSS中的一项技能，下面我们来看看怎么实现。

首先，我们需要在HTML中引入图片：

div class="image">
    img src="image.png">
    /div>

接着，在CSS中对图片进行定位：

.image {
    position: relative;
}
.image img {
    display: block;
    max-width: 100%;
    height: auto;
}

这里我们将图片所在的父元素设置为相对定位，这样就可以在图片上进行绝对定位。图片本身则设置为块级元素，并且充满整个容器。

接下来，我们可以通过设置伪元素的样式来添加小红点和数字：

.image::after {
    content: attr(data-count);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: white;
    background-color: red;
    position: absolute;
    top: 10px;
    right: 10px;
}
    

这里我们使用了::after伪元素来添加小红点数字。首先，使用content属性获取属性data-count的值作为数字展示。接着，设置样式使得它成为一个圆形的小红点。最后，设置其绝对定位在图片的右上角。

至此，我们就成功地在图片上添加了小红点数字。完整代码如下：

div class="image" data-count="3">
    img src="image.png">
    /div>
.image {
    position: relative;
}
.image img {
    display: block;
    max-width: 100%;
    height: auto;
}
.image::after {
    content: attr(data-count);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: white;
    background-color: red;
    position: absolute;
    top: 10px;
    right: 10px;
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！