CSS圖片右下角是一個非常常見的效果，通過CSS我們可以輕松的實現在圖片的右下角添加文字或者其他元素的效果。本文將介紹如何使用CSS來實現圖片右下角的排版效果。

/* 圖片容器 */
.image-container {
position: relative;
}
/* 圖片 */
.image {
display: block;
width: 100%;
height: auto;
}
/* 右下角文本 */
.text {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
line-height: 1.5;
}

實現圖片右下角的排版效果需要包含圖片的容器和圖片元素以及添加至右下角的文本元素。圖片容器需要使用相對定位（position: relative），圖片元素需要使用塊級標簽（display: block）以及自適應高度（height: auto）來確保圖像按比例縮放并在容器中垂直居中。

文本元素需要使用絕對定位（position: absolute）來確保它們被定位在容器的底部和右側。同時擴展至容器的寬度（bottom: 0和right: 0），以及使用padding和background-color屬性來創建淡色背景和添加內部填充效果。

最后，為文本元素添加顏色、字體大小和行高等樣式來確保它可以與圖片完美融合。

通過上述CSS代碼實現的圖片右下角排版效果可以非常簡單地添加到網站上，從而提高網站的用戶體驗和設計水平。