[分享]css中如何把字放进图片

在CSS中，我们可以很轻松地把文字嵌入到图片中。这种效果常见于广告图、产品宣传图等场合，可以更好地展示品牌或产品信息。下面我们来看一下如何实现这个效果。首先，在HTML文件中，需要在一个div元素内嵌...

在CSS中，我们可以很轻松地把文字嵌入到图片中。这种效果常见于广告图、产品宣传图等场合，可以更好地展示品牌或产品信息。下面我们来看一下如何实现这个效果。
首先，在HTML文件中，需要在一个div元素内嵌入一个img标签和一个p标签，代码如下：

<br> <br>
    <div class="image-caption"><br>
        <img src="image.png" alt="图片"><br>
        <p>这是图片标题</p><br>
    </div><br> 

<br> <br>
    .image-caption {<br>
        position: relative; /* 声明该元素的定位方式为相对定位 */<br>
        display: inline-block;<br>
    }<br>

    .image-caption p {<br>
        position: absolute; /* 声明该元素的定位方式为绝对定位 */<br>
        bottom: 0; /* 相对于底部距离为0 */<br>
        left: 0; /* 相对于左侧距离为0 */<br>
        width: 100%; /* 宽度100% */<br>
        background-color: rgba(0,0,0,.5); /* 背景色为半透明的黑色 */<br>
        color: #fff; /* 文字颜色为白色 */<br>
        margin: 0; /* 去掉p标签默认的外边距 */<br>
        padding: 10px; /* 添加内边距，让文字离边框有一定距离 */<br>
        z-index: 1; /* 设置p标签的z-index值大于图片的z-index值，以覆盖在图片上 */<br>
    }<br>

    .image-caption img {<br>
        position: relative; /* 因为之前的父元素已经设置了相对定位，这里将图片设置为相对定位 */<br>
        z-index: 0; /* 设置图片的z-index值小于p标签的z-index值，以便p标签覆盖在图片上 */<br>
    }<br>