请查看素材中”gugong.html”的效果,在图片标记后增加一个段落,文字为“故宫”,要求效果如下:即故宫两个字横向纵向均居中 ,其背景正好能遮住图片背景的下半部分,背景色为半透明,所以能看到图上的内容。 提示: 1)单行段落的纵向居中可以通过设置行高(line-height)与盒子高度一致来实现,(思考为什么) 2)设置半透明的属性为:opacity: 0.5; 数字越大,透明度越低。
时间: 2024-02-05 12:14:23 浏览: 73
可以通过以下代码实现要求的效果:
```html
<div style="position:relative;">
<img src="gugong.jpg" alt="故宫" width="600">
<div style="position:absolute; bottom:0; left:50%; transform:translateX(-50%); background-color:rgba(255,255,255,0.5); padding:10px;">
<p style="text-align:center; line-height:300px; height:300px; margin:0;">故宫</p>
</div>
</div>
```
解释:
- `position:relative;` 将父级元素设为相对定位,以便子元素使用绝对定位。
- `position:absolute; bottom:0; left:50%; transform:translateX(-50%);` 将子元素设为绝对定位,并使其位于图片下方的中心位置。
- `background-color:rgba(255,255,255,0.5);` 设置背景颜色为白色半透明。
- `padding:10px;` 增加内边距,使文字与背景之间有一定的间距。
- `text-align:center;` 将文字水平居中。
- `line-height:300px; height:300px;` 将行高与盒子高度都设为 300px,使文字垂直居中。因为行高等于盒子高度时,文字会垂直居中对齐,而不是底部对齐。
- `margin:0;` 去掉文字段落的默认外边距。