在網頁設計中，除了圖片本身的美觀性外，圖片下方的文字也是一個重要的設計元素。如何實現圖片下方文字的樣式？下面將介紹如何使用CSS來實現這個效果。

/* CSS代碼 */
.image {
position: relative; /* 相對定位 */
}
.image img {
display: block; /* 塊級元素，使圖片獨占一行 */
max-width: 100%; /* 圖片寬度最大為100% */
}
.image p {
position: absolute; /* 絕對定位 */
bottom: 0; /* 距離底部為0 */
left: 0; /* 距離左側為0 */
width: 100%; /* 寬度為100% */
text-align: center; /* 文字居中 */
background-color: rgba(0, 0, 0, 0.5); /* 背景半透明黑色 */
color: #fff; /* 文字顏色為白色 */
padding: 10px 0; /* 左右內邊距為0，上下內邊距10px */
}

在代碼中，用了position屬性和bottom、left、width等絕對定位屬性來實現文本居中和底部對齊，用了background-color和padding等屬性來美化設計。這個方法可以在不同尺寸的圖片下靈活應用，實現不同設計效果。