css在图片上添加文字代码

CSS可以通过一些代码实现在图片上添加文字，下面是具体的代码操作：

style>
.imgtext{
    position:relative;
 /*定位父级*/}
.imgtext img{
    display:block;
 /*把图片变成块级元素*/}
.imgtext p{
    position:absolute;
     /*绝对定位*/bottom:0;
     /*距离底部0像素*/width:100%;
    background:rgba(0,0,0,0.6);
     /*半透明背景*/color:#fff;
     /*字体颜色*/font-size:16px;
     /*字体大小*/text-align:center;
     /*居中对齐*/padding:10px;
     /*文字内边距*/box-sizing:border-box;
 /*保证不会超出父级*/}
    /style>
    div class="imgtext">
    img src="图片地址">
    p>
    这里是文字描述/p>
    /div>
    

首先要给父级元素设置position:relative属性，然后给图片设置display:block，让图片变成块级元素且占据整个父级元素的宽度。接着给描述文字设定position:absolute属性，让其相对于父级元素进行定位并且设置宽度为100%，让其占据整个父级元素的宽度。同时设置底部距离为0像素，并添加一个半透明背景颜色以及白色字体，使描述文字更加醒目。最后给文字设置居中对齐，并添加文字内边距保证文字内容不被截断。

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