CSS 圖片角標(biāo)是在圖片上添加自定義標(biāo)簽、標(biāo)識(shí)、標(biāo)記以及注釋的一種方式。這些標(biāo)簽可以用于說明圖像的含義、出處、來源、拍攝位置、作者等信息。在接下來的內(nèi)容中，我們將了解如何使用 CSS 在圖片上添加角標(biāo)。

//CSS代碼
.img-container {
position: relative; //相對(duì)定位
img {
max-width: 100%; //圖片最大寬度
.badge {
position: absolute; //絕對(duì)定位
top: 10px; //離上面的距離
right: 10px; //離右邊的距離
font-size: 14px; //字體大小
font-weight: bold; //粗體
padding: 6px 8px; //內(nèi)邊距
border-radius: 3px; //圓角
background-color: #333; //背景顏色
color: #fff; //字體顏色
}
}
}

首先，在 HTML 中將圖片放入相應(yīng)的容器中。然后，設(shè)置容器的位置為相對(duì)定位，圖片的的最大寬度為 100%。接下來，在 CSS 中，創(chuàng)建嵌套的樣式規(guī)則，以指定添加到圖像的角標(biāo)的樣式。其中，使用絕對(duì)定位、top 和 right 屬性來定義角標(biāo)的位置。

在 .badge 類選擇器中，我們可以調(diào)整角標(biāo)的字體大小、字體加粗、內(nèi)邊距、圓角、背景顏色和字體顏色等屬性，來定制你想要的角標(biāo)樣式。

在實(shí)際開發(fā)中，我們可以使用 JavaScript 動(dòng)態(tài)生成角標(biāo)內(nèi)容，以及響應(yīng)用戶的交互事件。這是一個(gè)非常實(shí)用的技巧，可以增強(qiáng)圖片的功能性和可用性。