css中文字在图片下面

在网页设计中，文字和图片的结合是非常常见的，然而如何让文字和图片结合的更加和谐，是一门需要学习的技巧。在CSS中，我们可以使用position属性来决定文字相对于图片的位置。

img {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 20px;
}

p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
} 

在上面的代码中，我们先将position属性设置为relative，这是因为如果文字的position属性不为absolute，那么它就无法相对于图片定位。接着，我们给p标签设置position: absolute;，这使得它可以自由定位。此时，需要结合bottom、left和right属性来控制文字的位置。我们也可以使用top属性，但需要注意的是，此时需要先将bottom属性设为auto，否则top属性会无效。

为了让文字更加美观，我们还可以为p标签设置text-align属性，以及设置font-size、color和background-color等样式。

如果想要实现多张图片加文字的效果，只需要将p标签和img标签包裹在一个共同的容器内，然后重复上面的步骤即可。

总的来说，相信掌握了以上知识，你一定能够更好地展示网页中的文字和图片了。在实际运用中，还需要不断地尝试和优化，发掘出更加完美的效果。