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文件中使用::之前的横幅代码，但是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

Cat banner：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: