当我给父盒子设置背景图片时,再给子盒子设置文字内容,为什么不会直接显示在图片上
时间: 2023-11-19 13:04:18 浏览: 39
这是因为子盒子是被父盒子包裹的,子盒子的文字内容只会在子盒子内部显示,而不会直接显示在父子的背景图片上。如果你想实现这个效果,可以将背景图片设置为父盒子的伪元素(::before 或 ::after),然后将文字内容设置在伪元素上。这样子盒子的内容就会直接覆盖在背景图片上了。示例代码如下:
```html
<style>
.parent {
position: relative;
width: 500px;
height: 300px;
background-image: url("bg.jpg");
background-size: cover;
}
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #333;
}
</style>
<div class="parent">
<div class="child">
这里是子盒子的文字内容
</div>
</div>
```
在上面的代码中,我们将父盒子设置为相对定位,然后在其上添加一个伪元素,并设置其为绝对定位,宽高都为100%。伪元素的背景色设置为半透明白色,这样就可以让背景图片透出来一部分。最后将子盒子设置为绝对定位,并通过 transform 属性将其垂直水平居中对齐。这样就可以实现子盒子的文字内容直接显示在父盒子的背景图片上了。