Question

我正在尝试制作HTML CSS德国国旗背景，这有点难。我尝试使用前后身体和内部，使用80％高度和50％宽度的白色部分。它应该在屏幕的中间，所以我做了50％，保持50％，但结果非常糟糕。该部分是所有文章都应该是这样的，就像白色空间的z索引大于身体，所以它就像国旗上的白色。

更新

jsFiddle：http://goo.gl/aCjHnK

Answer 1

这是一个有效的解决方案，我认为这个解决方案更容易。如果您希望在之前和之后实现此目的，请显示您的代码，以便我们能够提供帮助

<html>
<head>
<style type="text/css">
#black, #red,#gold {width: 150px; height:25px;}
#black{background: black}
#red{background:red}
#gold{background:gold}
</style>
</head>

<body>

<div id="black"></div>
<div id="red"></div>
<div id="gold"></div>
</body>

</html>

Answer 2

我使用:: before和:: after：

垂直堆叠：

#background {
    width: 100%;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    left:0;
    z-index:-1;
}
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#background::before {
    content: '';
    width: 100%;
    height: 33.33%;
    background: black;
    position: absolute;
    top: 0;
    left:0;
}

#background::after {
    content: '';
    width: 100%;
    height: 33.33%;
    background: gold;
    position: absolute;
    bottom: 0;
    left:0;
}

水平叠加：

#background {
    width: 100%;
    height: 100%;
    background: gold;
    position: absolute;
    top: 0;
    z-index:-1;
    left:0;
}
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#background::before {
    content: '';
    width: 33.33%;
    height: 100%;
    background: blue;
    position: absolute;
    top: 0;
    left:0;
}

#background::after {
    content: '';
    width: 33.33%;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    right:0;
}

Html标志背景

2 个答案: