css在图片上放文本

CSS是网页设计中必要的部分，通过CSS可以为网页添加各种各样的样式。其中，在图片上放置文本是一个非常常见的需求，下面我们来看看如何使用CSS在图片上放置文本。

//HTML代码：div class="img-container">
    img src="image.jpg">
    p class="img-text">
    这是一张图片/p>
    /div>

首先，我们需要在HTML中将文本和图片放到一个容器div中。然后针对该div设置position:relative属性，这是因为我们要以该div作为参考点，来定位文本。

//CSS代码：.img-container{
    position:relative;
}
.img-text{
    position:absolute;
    top:0;
    left:0;
    color:white;
    background-color:rgba(0,0,0,0.5);
    padding:10px;
}
    

接着，我们给文本元素（p标签）设置position:absolute属性，这样就可以将文本从文档流中移出，不影响其他元素的位置。top和left属性可以根据自己的需要来进行调整，来决定文本放置的位置。

最后，我们可以调整文本的样式，例如颜色、背景色、字体等等，来达到想要的UI效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！