Html标志背景_Html_Css_Background

Html标志背景

html css

Html标志背景,html,css,background,Html,Css,Background,我正在尝试制作一个HTML CSS德国国旗背景，这有点难。我试着在身体上使用前后，在里面放一个80%高50%宽的白色部分。它应该在屏幕中间，所以我做了前50%，左50%，但结果真的很糟糕。这一部分是所有文章应该在的地方，所以它就像一个z索引大于主体的空白，就像旗帜上的白色更新 jsFiddle:这里有一个可行的解决方案，我认为这更容易。如果您想在前后实现这一点，请显示您的代码，以便我们能够提供帮助 <html> <head> <style type="text/

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

更新

jsFiddle:

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

<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>


#黑色、红色、金色{宽度：150px；高度：25px；}
#黑色{背景：黑色}
#红色{背景：红色}
#黄金{背景：黄金}

我让它在：：之前和：：之后工作：

验证堆栈：

#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;
}

你能发一些代码吗？也许可以使用jsfiddle.com向我们展示您现在拥有的功能