在CSS中，我們可以通過給圖片添加一個
元素來實現對圖片的定位和樣式的控制。
.image-wrapper {
position: relative;
}
.image-wrapper >img {
display: block;
width: 100%;
height: auto;
}
.image-wrapper >div {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.8);
color: white;
font-size: 1.2rem;
}以上代碼實現了一個簡單的圖片和文本結合的效果，下面進行詳細解析。
首先，我們需要將圖片的包裹元素設置為相對定位，以便在后面的絕對定位的設置中作為參考系。
然后，我們給圖片設置了一個100%的寬度和自適應高度，確保圖片寬度鋪滿包裹元素，且高度按比例調整，不會出現圖片自帶的留白。
最關鍵的是給圖片包裹元素添加了一個絕對定位的
元素，我們在這個
元素中設置了文本樣式的一些屬性，如背景色、文本顏色、字號等。通過設置bottom: 0;left: 0;right: 0;padding: 1rem;等屬性，使得文本居于圖片下方且有留白，更美觀。
通過這種方法，我們可以隨意控制圖片上文本的位置和樣式，更好地展示圖片的內容。
下一篇css 圖片上展示文字