CSS中的背景图片可以通过明确指定文件的位置和名称来实现。使用背景图片的好处是可以在不改变文本布局的情况下将图像和文本混合。但有时候我们需要在图片旁边加上一些描述，这时候就需要在图片上覆盖一层透明的图层，然后在上面添加文本。以下是一个完整的示例，可以帮助你展示如何在图片旁边添加描述。

.photo {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background: url("example.jpg") no-repeat center center;
background-size: cover;
}
.photo::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opactiy 0.2s;
}
.photo:hover::before {
opacity: 1;
}
.photo p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
font-size: 1.2rem;
}

首先，我们创建了一个类名为“photo”的div元素，它是一个块级元素，具有200像素的宽度和高度，并被设置为相对定位（在父元素中）。我们还将背景图片的地址设为“example.jpg”，并将其位置（水平和垂直）设置为页面中心。我们还添加了一个名为“background-size”的属性，用于将背景图片撑满整个元素，以防止它被裁剪或拉伸。

接下来，我们使用伪元素“::before”创建了一个透明的图层。该图层与相对定位的.parent元素重合，并在其上方。当鼠标悬停在图像上时，我们通过将其不透明度从0到1的转换来显示该层，使其完全不可见。

最后，我们添加了一个带有图像描述的段落元素。该元素是相对定位的，位于“parent”的底部和左侧，宽度为100%。我们使用标准的CSS属性来进行排版：底部对齐，左对齐，填充10像素，并设置文本对齐方式为中心。文本颜色设为白色，字体大小设为1.2rem。