如何在CSS中添加顶部横幅而不触摸或添加任何HTML div？

Question

我想在网站顶部添加横幅，但完全不要触摸HTML文件。 这是横幅的CSS代码：

position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;

而且我的CSS文件中也有此代码

h2:before{
content:url(https://something.png);
margin-right: 5px;
vertical-align: 10%;
}
h1:after {
content:url(https://smething.png);
float: right;   
}

这是我无法触摸的HTML代码：

<head>
<title>A title </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="file.css" /> 
</head>
<body>
<div id="content">
<h1>header1</h1>
<div id="test">
<h2>header2</h2>

<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="yourname" size="40" />
</div>
</fieldset>

<div id="footer">  
<p>Thank you<a href="http://www.123.com/en">123</a></p>
</div>
</div>
</body>
</html>

我尝试在CSS文件中使用:: before作为横幅代码，但是h2之前的图片随横幅而起，我无法将它们分开！ 谁能帮帮我吗？？！！

Answer 1

我希望这段代码能对您有所帮助： jsfiddle

h1{
  margin-top: 10%;
}


h1:before{ 
 content:"";
 position: absolute;
 top: 0px;
 left: 0px;
 height: 30px;
 width: 100%;
 background-color: #5d2c2c;
 line-height: 0;
 }

Answer 2

猫横幅：

 #content:before { content: ""; background:url(http://lorempixel.com/800/200/cats) no-repeat; width: 100%; height: 200px; position: absolute; top: 0; left: 0; } #content{ margin-top:220px; }

 <div id="content"> <h1>header1</h1> <div id="test"> <h2>header2</h2> <fieldset> <legend>About You</legend> <p id="UserInfo">What is your name?</p> <div> <input type="text" name="yourname" size="40" /> </div> </fieldset> <div id="footer"> <p>Thank you<a href="http://www.123.com/en">123</a></p> </div> </div> </div>

如何在CSS中添加顶部横幅而不触摸或添加任何HTML div？

问题描述

2 个解决方案

解决方案1
0 2016-03-05 12:32:19

解决方案2
0 2016-03-05 12:41:58

如何在CSS中添加顶部横幅而不触摸或添加任何HTML div？

问题描述

2 个解决方案

解决方案1 0 2016-03-05 12:32:19

解决方案2 0 2016-03-05 12:41:58

解决方案1
0 2016-03-05 12:32:19

解决方案2
0 2016-03-05 12:41:58