我想创建一个可以在网页顶部显示的CSS功能横幅。横幅将包含一个可缩放的渐变作为背景，因此它始终保持在父div 的 100%，并且在div 的每一端（左右）都有一个图像，这些图像仍然固定在横幅的边缘。我还希望在横幅中央有一个专用的空间用于文本。
我确信这相当简单，但我找不到任何专门关于在其他可扩展的div 中定位图像的教程。
任何帮助将不胜感激。
罗斯
我不确定，但你的意思是：
|图片| 内容 |图片|？
尝试使用一些div，例如：
<div class="image-left">
<div class="image-right">
<div class="content">
<!-- rarndom content -->
</div>
</div>
</div>
并在 CSS 中定义样式，例如（例如，您希望在边缘的图片具有 50px 的宽度和高度）：
.image-left{
background:url(/images/left-banner.png) no-repeat left;
height:50px;
padding-left:50px;
width:100%;
}
.image-right{
background:url(/images/right-banner.png) no-repeat right;
height:50px;
padding-right:50px;
width:100%;
}
.content{
/* you can also define styles for padding or whatever you want */
width:100%;
}
或横幅的高度，插入左边距和右填充值为所需图片的宽度。当然，在网址;)中设置正确的路径（我使用类似的结构并且它正在工作）
假设您具有相同的渐变背景图像，html 将如下所示：
<html>
<style type="text/css">
#banner{
width:100%;
height:400px;
background: url('bg.gif') 0 0 repeat;
}
.text-content{
width:960px;
margin: 0 auto;
/* background-color:#ffffff; */
}
</style>
<body>
<div id="banner">
<div class="text-content">
Lorem ipsum
</div>
</div>
</body>
</html>
通过一些实验，我设法将以下解决方案放在一起：
演示
但是，我几乎可以肯定其中会有不必要的代码。任何人都可以看看这个，让我知道是否有办法简化代码，让它更整洁一些。
此外，您会注意到中间div 继承了一些填充，导致它扩展到超出左右div 的高度。如果有人对此有解决方案，您能告诉我吗？
再次感谢，
罗斯
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 100%;
}
#container > div {
display: table-cell;
}
#left {
width: 200px;
height: 150px;
}
#middle {
width: 80%;
min-width: 400px;
max-width: 1000px;
height: auto;
color:white;
text-align:center;
display:table-cell;
vertical-align:middle;
/* fallback */
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
#right {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>Responsive Banner Test</h1>
<div id="container">
<div id="left">
<img src="http://placehold.it/200x150">
</div>
<div id="middle">
<h3>Title goes in here</h3>
</div>
<div id="right">
<img src="http://placehold.it/200x150">
</div>
</div>
</body>
</html>