CSS可以很容易地将文字附在图片上。这种效果通常用于制作卡片或者banner图等。

首先，要确保图片和文字碰撞在一起。这就需要设定图片和文字的外边距（margin）。

img {margin: 0;}p {margin: 0;position: absolute;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.5);padding: 10px;color: white;}

这样，图片和文字就会接触在一起。但是，文字会在图片的上方出现，看起来不够美观。因此，必须使用绝对定位（absolute positioning）将文字粘在图片下部。

接下来，可以将文字放入一个带有背景颜色和padding的容器中，这样文字就不会看起来太过单调了。

最终的代码如下：

<div ><img src="/post/example.jpg" ><p>这是一段文字，用来描述这张照片。</p></div>.card {position: relative;display: inline-block;}img {margin: 0;}p {margin: 0;position: absolute;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.5);padding: 10px;color: white;}

这样，就可以轻松地将文字附在图片上了。