[分享]css中怎么把字放在图片上面

在网页制作中，有时需要把文字放在图片上方，以增加图片的信息量和美观度。这时就需要用到CSS。首先，在HTML中嵌套一个图片和一段文字： 这是图片上方的文字。 然后，在CSS中利用定位（）属性，将文...

在网页制作中，有时需要把文字放在图片上方，以增加图片的信息量和美观度。这时就需要用到CSS。
首先，在HTML中嵌套一个图片和一段文字：

<div class="container">
    <img src="image.jpg">
    <p>这是图片上方的文字。</p>
</div> 

然后，在CSS中利用定位（position）属性，将文字放在图片上方：

.container {
    position: relative;
}
.container p {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
} 

其中，设置容器的position为relative，这样内部元素的position为absolute时，相对于容器进行定位。接着，设置文字元素的position为absolute，并通过top和left属性将其定位到图片的左上角。同时，设置文字元素的背景色为半透明的黑色。
通过这些设置，就可以轻松地将文字放在图片上面，并且实现自定义的样式。