[分享]css中怎么在图片上加文字

在CSS样式中，我们可以很方便地在图片上添加文字。这种方法广泛应用于网站设计和商业广告设计。下面我们就来一起了解一下如何在图片上添加文字。首先，我们需要使用HTML语言将图片插入到网页中。比如下面的代...

在CSS样式中，我们可以很方便地在图片上添加文字。这种方法广泛应用于网站设计和商业广告设计。下面我们就来一起了解一下如何在图片上添加文字。
首先，我们需要使用HTML语言将图片插入到网页中。比如下面的代码：

<div class="image-box"><br>
    <img src="images/pic.jpg" alt="一张美丽的图片"><br>
</div>

通过上面的代码，我们成功地在网页中添加了一张图片。接下来，我们需要在图片上添加一些文字。
将文本添加到图片上的方法很多，比如使用绝对定位或者浮动等方法。在这里，我们使用一种比较简单的方法——在图片的上层覆盖一个文字块。

<div class="image-box"><br>
    <img src="images/pic.jpg" alt="一张美丽的图片"><br>
    <p class="caption">这是一张美丽的图片</p><br>
</div>

在上面的代码中，我们使用了一个p元素，将文字块放在了图片的上方。我们还对这个文字块自定义了样式，比如设置了文字大小、颜色、背景颜色、透明度等属性。

.image-box {<br>
    position: relative;<br>
    display: block;<br>
    width: 500px;<br>
    height: 300px;<br>
    overflow: hidden;<br>
}<br>

.caption {<br>
    position: absolute;<br>
    bottom: 0;<br>
    left: 0;<br>
    width: 100%;<br>
    height: 50px;<br>
    font-size: 16px;<br>
    color: #fff;<br>
    background-color: rgba(0, 0, 0, 0.5);<br>
    opacity: 0.8;<br>
}

通过以上样式代码，我们定义了一个相对定位的图片框，设置了宽度、高度、显示方式等属性，用来限制图片的大小和位置。同时，我们还对文字块设置了绝对定位，使其覆盖在图片的下层，能够在图片上方显示。
我们对这个文字块设置了位置bottom: 0;left: 0，使用了100%的宽度，让其与图片的宽度一致，可以适应不同尺寸的图片。同时，我们还设置了文字大小、颜色、透明度等属性，使文字与背景颜色匹配，显示更加美观。
总结：通过以上的方法，我们可以很容易地在图片上添加文字。但要注意，这种方法只适用于简单的图片文字叠加，对于复杂的设计还需要使用其他的方法实现，比如使用图形软件等。