0

我正在尝试制作 HTML CSS 德国国旗背景，这有点难。我尝试在身体前后使用，并在身体内部放置一个 80% 高度和 50% 宽度的白色部分。它应该在屏幕中间，所以我做了前 50%，左 50%，但结果真的很糟糕。该部分是所有文章应该放在的地方，所以它就像 az 索引大于正文的空白空间，所以它就像旗帜上的白色。

更新

jsFiddle：http: //goo.gl/aCjHnK

4

2 回答 2

0

我让它与 ::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;
}
于 2014-07-24T10:23:06.377 回答
0

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

<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>
于 2013-11-03T15:09:01.097 回答