CSS是網頁設計中不可缺少的一部分，而元素外層加文字則是CSS中一個非常實用的技巧，可以讓網頁的排版更加美觀，提升用戶的體驗。以下是如何實現元素外層加文字的方法。

/*HTML代碼*/
<div class="box">
<img src="example.jpg" alt="example">
<p>這是一張圖片的描述文字</p>
</div>
/*CSS代碼*/
.box {
position: relative;
}
.box p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
box-sizing: border-box;
}

首先，在HTML代碼中創建一個包含圖片和描述文字的div元素，并設置class為box。

接著，在CSS代碼中給box元素設置position: relative，這是為了讓后面的絕對定位生效，并保證描述文字相對于圖片來定位。

然后，給box元素內的p元素設置position: absolute，同時將其放置在box元素底部和左側，寬度設置為100%。由于p元素絕對定位，所以不會對其他元素造成遮擋。

在樣式中，背景色設置為半透明黑色（rgba(0,0,0,0.5)），字體顏色設置為白色，內邊距為5px，盒子模型框大小包括內邊距、邊框和元素本身的寬度（box-sizing: border-box），以確保描述文字能夠完整顯示。

經過以上設置，我們便成功地讓元素外層加文字了。嘗試給其他元素添加描述文字，創造美觀的網頁排版吧！