今天我們來談一下圖片加文字的 CSS 樣式。這些技巧可以讓你的圖片更生動、有趣。下面是一些示例。 首先，我們來看一下如何在圖片上添加文字。我們可以使用 `position` 來定位文字，然后使用 `z-index` 來讓文字在圖片上方顯示。 ``` p { position: relative; z-index: 100; } img { position: relative; z-index: 0; } ``` 這個例子中，我們在 `p` 元素上設置了 `position: relative;` 和 `z-index: 100;`。這將把文字層疊到圖片上方。同時，我們在 `img` 元素上設置了 `position: relative;` 和 `z-index: 0;`。這將確保圖片在文字下面。 接下來，我們可以添加一些透明度，使文字半透明，這樣圖片可以透過文字看到，同時也讓文字更加柔和。我們可以使用 `rgba()` 函數來實現這個效果。 ``` p { position: relative; z-index: 100; background-color: rgba(255,255,255,0.5); padding: 10px; } img { position: relative; z-index: 0; } ``` 這個例子中，我們在 `p` 元素上添加了 `background-color: rgba(255,255,255,0.5);`。這將為文字添加一個薄薄的白色背景，使其半透明。 最后，我們來看一下如何新奇的排版圖片和文字。我們可以在圖片周圍添加一個包含文字的 div，然后讓這個 div 旋轉一定角度。這將創建一個有趣的效果，使文字繞著圖片旋轉。 ``` .container { position: relative; display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; margin: 0 auto; } .img-wrapper { position: absolute; } .img-wrapper img { width: 300px; } .text-wrapper { position: absolute; transform: rotate(45deg); } .text-wrapper p { padding: 10px; background-color: rgba(255,255,255,0.5); } ``` 在這個例子中，我們首先創建了一個 `.container` 元素，然后將其設置為 `position: relative;`。接下來，我們創建了一個 `.img-wrapper` 元素，并將其設置為 `position: absolute;`。然后，我們在這個元素中放置了一個圖片，并指定了其寬度為 `300px`。 接下來，我們創建了一個 `.text-wrapper` 元素，并在其中添加了一段帶有背景顏色的文本。然后，我們將其設置為 `position: absolute;` 并使用 `transform: rotate(45deg);` 讓它旋轉了 45 度。 現在，我們可以在 `.container` 元素中放置 `.img-wrapper` 和 `.text-wrapper` 元素，來看看效果如何。 以上就是圖片加文字的 CSS 樣式示例。希望這些技巧能夠幫助你創建更生動、更有趣的圖片。