css给图片右上角加标签 |css20

/* HTML 代码 */
<div class="image-container">
<img src="example.jpg">
<span class="label">Example</span>
</div>
/* CSS 代码 */
.image-container {
position: relative;
display: inline-block;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 14px;
}

如上代码所示，大家先以一个div标签作为图片容器，再将图片以img标签的形式插入其中。为了实现标签在图片右上角的效果，大家需要将图片容器的position属性设置为relative，再将标签的position属性设置为absolute，并且将top和right属性设置为0，即可使标签定位在图片的右上角。

接下来，大家可以对标签的样式进行设置。这里添加了padding、背景颜色、字体颜色和字体大小等属性，你可以根据需要进行修改。

最后，你可以将这些代码复制到你的CSS文件中，以便在页面中使用。记得将HTML代码中的example.jpg替换为你自己的图片路径，并在标签中输入适合的内容。

通过以上步骤，你就可以轻松地给图片添加右上角标签了。