Question

假设我有三个部分的横幅，第1部分和第3部分是弯曲边缘图像，第2部分是水平矩形图像。它看起来像

part1 ... part2 ... part3

part1和part3是其图像的尺寸，但part2应具有重复的背景图像，使得part2宽度的div调整为浏览器的宽度，以便横幅可以调整到任何宽度的浏览器。你如何为这三个div编写css，以便它们一起创建任意长度的横幅？

Answer 1

你的意思是这样吗？

请参阅demo fiddle。

HTML：

<div class="banner">
    <span></span>
    <span></span>
</div>

CSS：

.banner {
    height: 120px;
    background: url('middle-part-of-banner.png') repeat-x;
    overflow: hidden;
}
.banner span {
    display: inline-block;
    width: 140px;
    height: 120px;
    background: url('end-parts-of-banner.png') no-repeat;
}
.banner span+span {
    background-position: -580px 0;
    float: right;
}

Answer 2

我喜欢使用：之前和之后用于这些事情。它使HTML保持清洁，让我的头脑更有意义。

HTML：

<div id="banner"></div>

CSS：

#banner {
  height: 100px;
  background: url(http://placekitten.com/1/100) repeat-x left top;
  position: relative;
  z-index:1
}

#banner:before, #banner:after {
  content: '';
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  z-index: 2;
}

#banner:before {
  left: 0;
  background: url(http://placekitten.com/100/100) no-repeat left top;
}

#banner:after {
  right: 0;
  background: url(http://placekitten.com/100/100) no-repeat left top;
}

jsfiddle：http://jsfiddle.net/blineberry/3BapK/

Answer 3

您可以尝试使用中间BG的样式。

你能试试吗？您可能需要对其他样式属性进行轻微调整。如果您在此处显示左图和右图，我可以为您提供准确的代码。

.bg{
   background-image:url("path_to_repeating_bg");background-repeat:repeat-x;width:auto}
}

<div id="banner" style="clear:both">
   <div style="float:left">
      <img src="<left_img_path>" />
   </div>
   <div class="bg" style="float:left;width:auto">  
   </div>
   <div style="float:left">
      <img src="<right_img_path>" />
   </div>
</div>

Answer 4

试试这个demo

<div class="banner">
    <div class="part1">

    </div>

    <div class="part2">

    </div>

    <div class="part3">

   </div>
</div>

CSS：

div.banner{
    width:100%; 
}
div{
    display:inline;
    height:100px;
    solid:red;
    float:left;
}
div.part1{
    width:2%;
    border-raduis:5px;
    background:red;
}
div.part3{
    width:2%;
    background:red;
}
div.part2{
    width:96%;
    background:blue;
}

只需将part1，part2和part3的背景更改为您拥有的背景图像。

你怎么写这些div的CSS？

4 个答案: