在CSS中，可以使用content屬性來(lái)將頭像顯示為姓名，以下是一些示例代碼：

1、使用content屬性將頭像顯示為姓名：

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  position: relative;
}
.avatar::before {
  content: "姓名";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 50px;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)類名為avatar的頭像，并使用content屬性將姓名顯示在頭像中。position屬性用于將姓名文本定位在頭像的中心位置。border-radius屬性用于將頭像和姓名的背景色設(shè)置為圓形。background-color屬性用于設(shè)置頭像和姓名的背景色。

2、使用背景圖像將頭像顯示為姓名：

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url("image.png"); /* 將背景圖像設(shè)置為頭像 */
  position: relative;
}
.avatar::before {
  content: "姓名";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 50px;
}

在這個(gè)示例中，我們將背景圖像設(shè)置為頭像，并使用content屬性將姓名顯示在頭像中，其他屬性的設(shè)置與上一個(gè)示例相同。