css将文字放在图片底层,css3 media

css 配色方案，Css绘制动物，css布局盒子怎么并列，webstorm如何添加css文件，应用外部css文件用什么，css3+以中心旋转，css3 media

<div class="image-text">
<img src="example.jpg" alt="example">
<p>这是图片底部的文字内容</p>
</div>
.image-text {
position: relative;
}
.image-text img {
display: block;
width: 100%;
}
.image-text p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
margin: 0;
}

上面的代码演示了如何将文字放在图片底层，实现视觉上的融合效果。首先，将图片和文字都放在一个<div>标签中，并添加一个类名，这里大家命名为“image-text”。接着，设置该标签的position属性为relative，使得其中的子元素可以使用绝对定位。然后，将图片的display属性设置为block并设置宽度为100%，使得图片可以自适应父容器的大小，同时也可以使用box-sizing属性来控制元素的盒模型。最后，将文字的position属性设置为absolute，并设置bottom、left、width等属性，使得文字可以放在图片底部，且可以自适应容器大小。还可以设置文字的背景颜色、内外边距等，使得文字内容更加清晰易读。

使用CSS将文字放在图片底层，可以让网页的呈现效果更加生动、丰富、有趣，吸引用户的视觉注意力，提升用户体验。