CSS可以很好地控制網頁布局和外觀，包括圖片和文字的樣式。其中，圖片底部透明文字的效果可以讓設計更加美觀和富有創意。

/* 添加背景圖片 */
background-image: url('image.jpg');
/* 設置背景圖片覆蓋整個元素 */
background-size: cover;
background-repeat: no-repeat;
/* 透明度 */
opacity: 0.9;
/* 添加一個可伸縮框，將文字放在框內 */
display: flex;
flex-direction: column;
justify-content: flex-end;
/* 設置框的背景顏色，并設置透明度 */
background-color: rgba(0, 0, 0, 0.5);
/* 確保該框充滿整個圖片底部 */
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;

代碼中介紹了如何使用CSS創建圖片底部透明文字的效果。首先，需要使用background-image屬性添加背景圖片，并將背景覆蓋整個元素。接下來，使用opacity屬性設置透明度。然后，創建一個可伸縮框，并將文字放在框內。使用background-color屬性為框添加背景顏色，并設置透明度。最后，使用position屬性將框定位在圖片底部，并將padding屬性設置為20px，以確保該框充滿整個圖片底部。

總之，使用上述CSS代碼可以輕松地為網站的圖片添加透明文字效果，從而使網頁更具視覺吸引力。