css 文件在图片下面

CSS 文件是网页设计中必不可少的一部分，可以让网页具有更加美观的外观效果。其中，CSS 的布局能力非常强大，可以实现各种特效效果。其中一个常用到的布局效果就是将图片放在文字下方。下面通过代码示例进行演示。

<div class="photo">
  <img src="photo.jpg" alt="我的照片">
  <p class="caption">这是我的照片</p>
</div>

<style>
  .photo {
    position: relative;
    width: 300px;
    height: 400px;
  }
  .photo img {
    width: 100%;
    height: 100%;
  }
  .photo .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: rgba(0,0.5);
    color: #fff;
    text-align: center;
    line-height: 50px;
  }
</style>

通过上面的代码示例，我们可以实现图片位于文字下方。具体来说，我们通过设置图片容器的定位属性为相对定位，让图片成为容器的子元素。然后设置图片的宽高为 100% ，让图片充满整个容器，适应容器的大小。接下来，我们在图片容器中添加一个绝对定位的文字容器，将文字容器定位在图片容器的底部。最后，我们通过设置文字容器的样式属性，实现文字的半透明的黑色背景，以及白色的文字颜色和居中对齐。这样，我们就实现了图片位于文字下方的效果。