在元素内添加元素

Question

我是Web开发的新手,并试图弄清楚如何在元素中添加元素.

.blackBox {
  background: #000;
  z-index: 0;
}

.text {
  color: #000;
  z-index: 2;
}

.redBox {
  background: red;
  opacity: 0.5;
  z-index: 1;
}

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
  <div class="redBox" />
</div>

Answer 1

首先，您必须将容器位置text设置为和元素的相对和绝对位置redBox。然后给它们每个适当的top值，以便文本覆盖红色框。

然后，您可以使用skewY变换来实现倾斜效果。

我还用来border-radius获取图像中的圆形边框。

例如

.blackBox {
  background: black;
  z-index: 0;
  height: 200px;
  width: 300px;
  position:relative;
  border-radius: 10px;
}

.text {
  position:absolute;
  color: white;
  z-index: 2;
  padding: 10px;
}

.redBox {
  position:absolute;
  background: red;
  opacity: 0.5;
  z-index: 1;
  height: 110px;
  width: 300px;
  top: 45px;
  transform: skewY(-5deg);
}

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
  <div class="redBox" />
</div>