今天我们来谈一下CSS图片在图片上的使用。在Web设计中，使用一张图片作为网页的背景或者使用图片作为按钮都是非常常见的做法。而如何在这张图片上添加CSS样式，来达到更好的效果呢？下面我们会给大家介绍一些方法。

首先，我们需要给图片添加一个容器。代码如下：

<div class="image-container">
<img src="path/to/image.jpg" alt="image">
</div>

其中，<img>标签用来插入图片，而<div>标签用来作为图片的容器，我们可以为容器添加背景色或边框等样式。接下来，样式表如下：

.image-container {
position: relative; /* 定位为相对定位 */
width: 500px;
height: 300px;
}
.image-container img {
width: 100%; /* 图片宽度为容器的宽度 */
height: auto; /* 图片高度自适应 */
display: block; /* 图片变成块级元素 */
}
.image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5); /* 在图片上添加半透明遮罩 */
}
.image-container:hover::before {
background: rgba(255, 255, 255, 0.7); /* 鼠标滑过时颜色加深 */
}

代码注释已经说得很清楚了。这个样式表会在图片上添加一个半透明的遮罩，当鼠标滑过时会颜色加深。这种做法可以让图片看起来更有立体感，同时还能避免图片与背景之间的对比过强。

除了在图片上添加遮罩外，我们还可以在图片上添加文字或者图标等元素。代码如下：

<div class="image-container">
<img src="path/to/image.jpg" alt="image">
<p class="caption">Image Caption</p>
</div>

.image-container {
position: relative;
width: 500px;
height: 300px;
}
.image-container img {
width: 100%;
height: auto;
display: block;
}
.caption {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
text-shadow: 1px 1px #000;
font-size: 24px;
font-family: Arial, sans-serif;
}

这段代码在图片下方添加了一段文字说明。我们使用了绝对定位，并将文字放置在容器的左下角。同时，我们还用了一个黑色的文本阴影，让文字看起来更加突出。

总结来说，CSS图片在图片上的使用非常灵活多样。我们可以使用遮罩来增强图片的视觉效果，也可以在图片上添加文字或者图标等元素。通过这些方法，我们可以为网页添加更加丰富多彩的视觉效果。