Question

我想创建一个CSS功能横幅，我可以在网页顶部显示。横幅将由可缩放渐变作为背景组成，因此它始终保持在父div的100％处，并且在div的每个末端（左侧和右侧）都有一个图像，该图像保持固定在横幅的边缘。我还想在文字横幅的中心有一个专门的空间。

我确信这是相当简单的，但是我找不到任何专门用于在其他可扩展的div中定位图像的教程。

非常感谢任何帮助。

罗斯

Answer 1

我不确定，但你的意思是：

|图片|内容|图片|？

尝试使用几个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%;
}

插入高度为图片或横幅的高度，为padding-left和padding-right值插入所需图片的宽度。当然，在网址中设置正确的路径;）（我使用类似的结构，它正在工作）

Answer 2

假设你有相同的渐变背景图像，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>

Answer 3

通过一些实验，我设法将以下解决方案整合在一起：

Demo

但是，我几乎可以肯定那里会有不必要的代码。任何人都可以看看这个，让我知道是否有一种简化代码的方法，所以它有点整洁。

另外，你会注意到中间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>

具有定位图像的可扩展特征区域

3 个答案: