CSS文字垂直圖片

在CSS中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)文字垂直圖片的效果，我們需要?jiǎng)?chuàng)建一個(gè)包含圖片和文字的容器，然后將文字旋轉(zhuǎn)90度，并將其位置調(diào)整為圖片的上方。

HTML結(jié)構(gòu)如下：

<div class="image-container">
  <img src="image.jpg" alt="圖片">
  <p class="vertical-text">這是垂直文字</p>
</div>

CSS樣式如下：

.image-container {
  position: relative;
  width: 200px;
  height: 300px;
}
.image-container img {
  width: 100%;
  height: 100%;
}
.vertical-text {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(90deg);
  writing-mode: vertical-rl;
}

在上面的代碼中，我們首先將圖片和文字的容器設(shè)置為相對(duì)定位，以便我們可以將文字定位在圖片的上方，我們將圖片設(shè)置為填充整個(gè)容器，我們將文字設(shè)置為***定位，并將其位置調(diào)整為容器的左上角，我們使用transform屬性將文字旋轉(zhuǎn)90度，并使用writing-mode屬性將文字設(shè)置為垂直書寫。

通過(guò)這種方式，我們可以實(shí)現(xiàn)CSS文字垂直圖片的效果。