在 div 上绘制背景

Question

所以我有一个 div，它显示一个大标题，两边有两条线，填满了剩余的宽度。

但是现在我需要在这后面绘制一些文本，因为我正在用 background-color 绘制标题栏，所以它们被绘制在文本后面。

如何画成从后往前显示的组件是[bg background-color]->[bg:before]->[title:before/after background-color]->[标题]?

这是我的代码：

#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>

Answer 1

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

我们用z-index

从后到前

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

所以，

首先将z-index(1)添加到bg background-color

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

这里，我使用了`position:relative;`。为什么？在 z-index?

中使用定位

z-index 对该元素没有影响，因为它 不是定位元素。 尝试设置它的位置属性到 static.

以外的东西

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

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

然后将z-index(3)添加到标题：before/after background-color

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

终于z-index(4)到标题

.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 上绘制背景

Have background drawn over a div

html

css

background

我们用z-index

这里，我使用了`position:relative;`。为什么？在 z-index?

在 div 上绘制背景

Have background drawn over a div

html

css

background

我们用z-index

这里，我使用了position:relative;。为什么？在 z-index?

这里，我使用了`position:relative;`。为什么？在 z-index?