在網頁設計中，如何實現文字動態(tài)顯示在圖片上是一項非常重要的技能。CSS提供了許多方式來實現這個效果，其中一種方法是使用CSS的position屬性。下面我們來看一下具體的實現方法。

/* 首先我們需要給要展示的圖片添加一個position屬性，并設為相對定位 */
img{
position: relative;
}
/* 接下來，我們使用偽元素before來添加一個新的空元素，用于顯示文字 */
img:before{
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8; /* 文字背景透明度 */
background-color: #fff; /* 文字背景顏色 */
}
/* 最后，我們將要顯示的文字添加到偽元素before中 */
img:before{
content: attr(data-text);
text-align: center;
font-size: 24px;
color: #000;
/* 其他文字樣式屬性可以根據需求自行添加 */
}

這樣，我們就成功實現了文字在圖片上的動態(tài)顯示效果。上述代碼中，我們使用了CSS的position屬性來對圖片和文字進行定位，使用偽元素before來添加一個空元素并顯示文字，利用attr函數來從data-text屬性中獲取要顯示的文字。通過調整不同的CSS屬性，我們可以輕松地改變文字的顯示效果。