dw怎么在图片上添加文字(html&css)
时间: 2024-09-12 09:05:42 浏览: 58
DW网页设计HTML+CSS+JAVASCRIPT
要在HTML和CSS中给图片添加文字,你可以使用`<img>`标签配合`<figure>`和`figcaption`元素。这是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
figure {
position: relative;
}
figcaption {
position: absolute;
bottom: 0; /* 将文字放在图片下方 */
width: 100%; /* 保持宽度等于图片宽度 */
text-align: center;
background-color: rgba(0, 0, 0, 0.5); /* 可选:半透明黑色背景 */
color: #fff; /* 白色文本颜色 */
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<figure>
<img src="your-image-url.jpg" alt="你的图片描述">
<figcaption>这是图片的文字说明</figcaption>
</figure>
</body>
</html>
```
在这个例子中,`<img>`标签包含图片URL和alt属性,提供图片的替代文本(对于无法显示图片的情况)。`figcaption`元素放置在`<figure>`内,它会作为图片下的一个标题或说明。
如果你想要更复杂的布局或者自定义样式,可以使用CSS调整`figcaption`的位置、字体、颜色等属性。记住替换`your-image-url.jpg`为你实际的图片路径。
阅读全文