css设置文字浮于图片上
时间: 2023-08-06 20:03:28 浏览: 1273
要实现文字浮于图片上的效果,可以使用CSS的position属性和z-index属性。具体步骤如下:
1. 首先将图片和文字包裹在一个容器中,例如一个div元素。
2. 设置div的position属性为relative,这样图片和文字的位置将相对于容器进行定位。
3. 设置图片的z-index属性为1,使其层级低于文字,不会遮挡文字。
4. 设置文字的position属性为absolute,这样文字将脱离文档流,可以自由定位。
5. 设置文字的z-index属性为2(或更高),使其层级高于图片,覆盖在图片上方。
下面是一个示例代码,可以参考:
```html
<div class="container">
<img src="your-image.jpg" alt="Your Image">
<p class="text">Your Text</p>
</div>
<style>
.container {
position: relative;
}
img {
z-index: 1;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
</style>
```
在上面的代码中,容器的位置属性设置为relative,图片的z-index属性设置为1,文字的position属性设置为absolute,z-index属性设置为2,使文字浮于图片上方。其中,文字采用了绝对定位,通过top、left和transform属性使其居中显示。