如何在两个不同的背景之间放置一个div

Question

我想在两个不同的背景之间放置一个div。 它看起来像下图：

如您所见，div位于两个背景之间，白色和蓝色。

我怎样才能做到这一点？

Answer 1

您可以通过应用于该div来使用以下代码。在此代码中，您可以使用两种不同的颜色来处理背景。

// Fetch task data
$task_fetch = $conn->prepare("SELECT * FROM system_tasks WHERE task_id = :task_id");
$task_fetch->bindValue(":task_id", $_GET['id'], PDO::PARAM_INT);
$task_fetch->execute();

在上面的代码中不删除任何一行，因为每行都是为了浏览器兼容性，每行代码都是针对不同的浏览器。

Answer 2

您可以定位白色div，使其堆叠在蓝色和白色背景的div之上。

https://jsfiddle.net/z6ohochn/

#blue {
    background: blue;
    width:100%;
    height:60px;
}
#white {
    width:80%;a
    height:50px;
    background:white;
    z-index:2;
    position:relative;
    top:-80px;
    left:10%;
    border-radius:5px;
}
#gray {
    background: gray;
    width:100%;
    height:60px;
}

Answer 3

您可以在中间所需的position:absolute上使用margin-top和否定div

检查this