本文目錄導(dǎo)讀：

1. 使用HTML和CSS創(chuàng)建標(biāo)注
2. 隱藏標(biāo)注內(nèi)的文字

CSS技巧：圖片上標(biāo)注文字但不顯示文字內(nèi)容

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要在圖片上標(biāo)注文字以突出某些重要信息或者進(jìn)行說明，在某些情況下，我們可能只希望標(biāo)注存在而不顯示具體的文字內(nèi)容，本文將介紹如何通過CSS實(shí)現(xiàn)這一效果。

使用HTML和CSS創(chuàng)建標(biāo)注

我們需要在HTML中創(chuàng)建一個(gè)包含圖片的標(biāo)簽，并在圖片上添加標(biāo)注的容器，我們可以使用CSS來設(shè)置標(biāo)注的樣式。

示例代碼：

<div class="image-container">
  <img src="your-image.jpg" alt="Image Description">
  <div class="label">標(biāo)注</div>
</div>

在CSS中，我們可以設(shè)置標(biāo)注的位置、大小、背景色等樣式。

.image-container {
  position: relative; /* 使標(biāo)注相對(duì)于圖片定位 */
}
.label {
  position: absolute; /* ***定位使標(biāo)注可以覆蓋在圖片上 */
  top: 50px; /* 調(diào)整標(biāo)注位置 */
  left: 100px; /* 調(diào)整標(biāo)注位置 */
  width: 50px; /* 設(shè)置標(biāo)注寬度 */
  height: 50px; /* 設(shè)置標(biāo)注高度 */
  background-color: #000; /* 設(shè)置標(biāo)注背景色 */
  /* 可以添加其他樣式，如邊框、陰影等 */
}

這樣我們就創(chuàng)建了一個(gè)標(biāo)注在圖片上的效果，默認(rèn)情況下，標(biāo)注內(nèi)會(huì)顯示文字，接下來我們將介紹如何讓標(biāo)注內(nèi)的文字不顯示。

隱藏標(biāo)注內(nèi)的文字

要讓標(biāo)注內(nèi)的文字不顯示，我們可以通過設(shè)置CSS的color屬性為transparent來實(shí)現(xiàn)，為了確保文字能夠被鼠標(biāo)選中（雖然不顯示），我們可以設(shè)置user-select屬性為none，示例代碼如下：

.label {
  color: transparent; /* 文字透明，不顯示 */
  user-select: none; /* 防止文字被選中 */
}
```這樣設(shè)置后，雖然標(biāo)注仍然存在，但其中的文字內(nèi)容將不會(huì)顯示，用戶只能看到標(biāo)注的形狀和背景色，而無法看到具體的文字內(nèi)容，這種方法在需要突出某個(gè)區(qū)域但又不希望泄露具體內(nèi)容的情況下非常有用。