在web開發中，難免會遇到需要在頁面中添加圖片的情況。而有時候，我們需要對圖片進行縮放，并加上一些文字來進行說明，這就需要運用到CSS了。

首先，我們需要在HTML中插入一張圖片，在img標簽中設置其src屬性即可。

<img src="example.jpg" alt="example">

接下來，我們可以使用CSS的transform屬性對圖片進行縮放。其中，scale()函數用于控制縮放比例。

img {
transform: scale(0.5);
}

上面的代碼會將圖片縮小到原來的一半。我們也可以將scale()函數中的值改為大于1的數字，實現圖片的放大。

img {
transform: scale(2);
}

現在，如果我們想在圖片上添加一些文字，可以使用CSS的偽元素:before和:after。可以給偽元素添加content屬性，來在其上添加文字。

img:before {
content: "這是一張圖片";
}

我們也可以使用::before或者::after代替:before和:after來添加偽元素。使用::會更符合W3C的規范。

最終，我們的HTML代碼可能會變成這樣：

<div class="wrapper">
<img src="example.jpg" alt="example">
<p class="caption">這是一張圖片</p>
</div>

對應的CSS代碼可能會變成這樣：

.wrapper {
position: relative;
width: 50%;
margin: 0 auto;
}
img {
display: block;
max-width: 100%;
height: auto;
transform: scale(0.5);
}
.caption {
position: absolute;
bottom: -1.5em;
left: 50%;
transform: translate(-50%);
padding: 0.5em;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 0.8em;
}
.caption:before {
content: "";
display: block;
position: absolute;
top: -0.5em;
left: 50%;
transform: translate(-50%);
border-top: 0.5em solid rgba(0, 0, 0, 0.7);
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
}
.caption:after {
content: "";
display: block;
clear: both;
}

其中，我們設置了父元素wrapper的position為relative，來使其作為絕對定位元素的參考點。在圖片的下方，我們通過絕對定位，使用偽元素:before來添加一個帶有三角形的黑色背景，緊貼圖片底部。然后通過絕對定位和transform屬性來使caption居中。最后在caption上添加文字即可。

總體來說，使用CSS實現圖片縮放和添加文字比較簡單，只需要熟悉transform和偽元素的使用方法即可。