[分享]css3图片加文字属性

CSS3是前端开发中常用的一种技术，可以实现很多有趣的效果。其中，图片加文字属性是其中的一项常见需求。通过添加一些CSS样式，我们可以实现图片上添加文字的效果，可以用于图片说明、广告宣传、产品介绍等场...

CSS3是前端开发中常用的一种技术，可以实现很多有趣的效果。其中，图片加文字属性是其中的一项常见需求。通过添加一些CSS样式，我们可以实现图片上添加文字的效果，可以用于图片说明、广告宣传、产品介绍等场景。

/* HTML 代码 */
<div class="picture">
   <img src="example.jpg" alt="example">
   <p>这是一张茉莉花茶的图片</p>
</div>

/* CSS 代码 */
.picture {
   position: relative; /* 确保文字绝对定位的基准点 */
   width: 300px;
   height: 200px;
}

.picture p {
   position: absolute; 
   bottom: 0; /* 文字在底部 */
   width: 100%;
   background-color: rgba(0,0,0,0.5); /* 背景半透明黑色 */
   color: #fff;
   text-align: center;
   padding: 10px;
   margin: 0;
} 

上述代码中，我们首先定义了一个含有图片和文字的div，并给其设置了合适的宽度和高度。然后，我们在这个div内部加入p标签，并给它添加一些样式。

这里，我们利用position属性的absolute值，让p标签相对于其父元素进行绝对定位。通过bottom属性，我们将文字的基准线固定在div的底部。同时，将width属性设置为100%，确保文本的宽度与div保持一致。

为了美化效果，我们增加了一些视觉元素。通过background-color属性，我们将文字背景染成半透明的黑色，以凸显文字。通过color属性，我们设置字体颜色为白色，使其更易读。text-align属性则用于居中对齐文本，并且还添加了一些padding，以增加文本区域的内部空间。

以上就是利用CSS3实现图片加文字的方法。在实际使用中，我们还可以根据需求进行更多的定制化，例如不同的字体、字号、阴影等效果。这样做不仅能让图片信息更加清晰明了，还有助于提升用户体验。