Question

此处使用 CSS网格系统希望覆盖图像，如右侧上的边距的徽标的div 即可。我可以猜测应该有多种方法，我很想知道你建议采用什么方法，请提供一个实例。

div1和div2应该用一点余量填充整个宽度。图像将具有一定的透明度，并且在右侧也会有一个边距，例如 80px 。

我尝试的代码如下所示，此时无法正常工作：

＆＃13;

.c1Wrap{
    display: grid;
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-rows: 100px 100px;

}


.c1HeaderTop{
    grid-row: 1;
    background: #db4ea5;
}
.c1HeaderBottom{
    grid-row: 2;
    background: #831d5c;
}

.c1Logo {
    z-index: 101;
    grid-row: 1/2; 
    opacity: 0.6;
    grid-row: 1/2;
    width: 200px;
    height: 200px;
    right: 80px;
    background-color: #222;    
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>
<body>
<div class="c1Wrap">
    <div class="c1HeaderTop"></div>
    <div class="c1HeaderBottom"></div>
    <div class="c1Logo"></div>
</div>
</body>
</html>

＆＃13;

如果有任何帮助，请附上所需的外观。

Answer 1

我不确定你只能用CSS网格做到这一点。使用绝对定位可以轻松完成：

.c1Wrap{
    display: grid;
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-rows: 100px 100px;
    position: relative;
}


.c1HeaderTop{
    grid-row: 1;
    background: #db4ea5;
}
.c1HeaderBottom{
    grid-row: 2;
    background: #831d5c;
}

.c1Logo {
    z-index: 101;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.6;
    width: 180px;
    height: 180px;

    background-color: #222;    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>
<body>
<div class="c1Wrap">
    <div class="c1HeaderTop"></div>
    <div class="c1HeaderBottom"></div>
    <div class="c1Logo"></div>
</div>
</body>
</html>

Answer 2

答案是重叠单元格，我们还需要定义列。它会给我们确切的结果。

display: sticky;

.c1Wrap{
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 1fr 1fr 200px;
}

.c1HeaderTop{
    grid-row: 1;
    grid-column: 1/4;
    background: #db4ea5;
}
.c1HeaderBottom{
    grid-row: 2;
    background: #831d5c;
    grid-column: 1/4;
}

.c1Logo {
    z-index: 101;
    grid-row: 1/3;
    grid-column: 3;
    opacity: 0.6;
    background-color: rgb(134, 133, 133);    
}

将图像显示为2行顶部的叠加层

2 个答案: