css在图片下面加入文字 |css3圆点自动闪光效果

HTML结构：
<div class="container">
<img src="images/pic.jpg">
<p>这是一张漂亮的风景图片</p>
</div>
CSS样式：
.container {
position: relative;
display: inline-block;
}
.container p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.7);
margin: 0;
padding: 10px;
text-align: center;
font-size: 16px;
}

首先，大家需要在HTML中创建一个包含图片和文字的容器，即用div包含img和p。为了让文字在图片下面，大家先将容器设置为相对定位。然后，大家对p标签进行绝对定位，将其放置在容器的最底部，左对齐，并将其宽度设为100%。接着，大家对p标签进行样式设置，如背景、边距、居中对齐、字体大小等等。最终，大家实现了在图片下方添加文字的效果。