在div上绘制背景 [英] Have background drawn over a div

问题描述

因此，我有一个div，该div显示一个大标题，其两侧各占两行，并填充了宽度的其余部分.

So I have a div that displays a big title with two lines on its sides that fill the rest of the width.

但是现在我需要在此后面绘制一些文本，并且因为我正在用背景色绘制标题栏，所以它们被绘制在文本后面.

However now I need to have some text drawn behind this, and because I am drawing the title's bars with background-color they are drawn behind the text.

如何以这样的方式绘制它，使显示的组件从后到前为[bg background-color]-> [bg:before]-> [title:before/after background-color]->; [title]?

How can I draw it in such a way that the displayed components from back to front are [bg background-color]->[bg:before]->[title:before/after background-color]->[title]?

这是我的代码:

#bg
{
  width: 100%;
  height: 100%;
  background-color: silver;
  z-index: -1;
}

#bg:before
{
  content: 'Background';
  position: absolute;
  font-size: 3em;
  color: white;
  user-select: none;
}

#bg *
{
  z-index: 0;
}

.title
{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title:after, .title:before
{
  content: '';
  width: 50%;
  background-color: black;
  height: 0.2em;
  margin-left: 20px;
  margin-right: 20px;
}

.section_titre h1
{
  font-size: 1em;
  margin: 0px;
}

<div id="bg">
  <div class="title">
    <h1>Example</h1>
  </div>
</div>

推荐答案

z-index CSS属性设置定位元素及其后代或flex项的z顺序.Z-index较大的重叠元素覆盖较小的z-index.

我们使用z-index

从前到后的

• [ bg背景颜色]->[ bg:之前]->[标题:背景颜色之前/之后]->[标题]

• [bg background-color] -> [bg:before] -> [title:before/after background-color] -> [title]

所以

首先将z-index(1)添加到 bg背景颜色

Firstly add z-index(1) to bg background-color

#bg{
  z-index: 1;
  position:relative;// z-index work with other than static position
}

在这里，我使用的是 position:relative; .为什么?在z-index中使用定位?

---

z-index 对此元素无效，因为它不是定位元素.尝试将其position属性设置为 static 以外的其他值

Here,I used position:relative;. Why? Using positioning in z-index?

---

z-index has no effect on this element since it’s not a positioned element. Try setting its position property to something other than static.

然后将z-index(2)添加到 bg:before

Then add z-index(2) to bg:before

#bg:before {z-index:2;}

然后将z-index(3)添加到 title:背景颜色之前/之后

Then add z-index(3) to title:before/after background-color

.title:after, .title:before {z-index:3;}

最后将z-index(4)转换为标题

Finally z-index(4) to title

.title{z-index:4;position:relative;}

工作演示

#bg{
  width: 100%;
  height: 100%;
  background-color: silver;
  z-index: 1;
  position:relative;
}

#bg:before{
  content: 'Background';
  position: absolute;
  font-size: 3em;
  color: white;
  user-select: none;
  z-index:2;
}

.title{
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index:4;
  position:relative;
}

.title:after, .title:before{
  content: '';
  width: 50%;
  background-color: black;
  height: 0.2em;
  margin-left: 20px;
  margin-right: 20px;
  z-index:3;
}

.section_titre h1{
  font-size: 1em;
  margin: 0px;
}

<div id="bg">
  <div class="title">
    <h1>Example</h1>
  </div>
</div>

这篇关于在div上绘制背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！