Question

我将this design转换为HTML＆amp; CSS格式。

由于左侧部分和右侧部分未使用相同的图像文件，因此重复背景顶部时我感到困惑。

我已尝试使用this trick，但它对我不起作用。

我想重复这些文件，并在中间标题（header.jpg）：

左上角：http://i.imgur.com/tcr1F.jpg
右上角：http://i.imgur.com/PchTG.jpg

我也试过背景位置，但对我没用。

我该怎么做我的朋友？

谢谢。

Answer 1

也许应该更好地重复背景并成为w <div class=wrapper>的背景，其中包含所有网站内容，或类似的东西......并切割更大的裁剪......不仅仅是1像素高度，但约50-60

Answer 2

我不确定我理解你的问题，但我认为这就是你所追求的：
http://jsfiddle.net/ub66M/1/

html看起来像这样：

<div id="page">
  <div id="header-wrapper">
    <div id="header-left"><!-- empty, just for background --></div>
    <div id="header-right"><!-- empty, just for background --></div>
    <div id="header-center">
        the actual content of the header comes here
    </div>
  </div>
</div>

并且css看起来像这样：

#header-wrapper {
    width: 100%;
    position: relative;
}
#header-left, #header-right {
    width: 50%;
    position: absolute;
    top: 0;
    background-repeat: repeat-x;
    height: 284px;
    z-index: -1;
}
#header-left {
  left: 0;
  background-image: url(http://i.imgur.com/tcr1F.jpg);
}
#header-right {
  left: 50%; 
  background-image: url(http://i.imgur.com/PchTG.jpg);
}
#header-center {
    width: 500px; /* adapt to actual width of center slice */
    height: 284px;
    margin: 0 auto;
    background: url(http://placehold.it/500x284) no-repeat; /* put your center slice here */
}

诀窍在于添加两个额外的div，并将它们绝对置于标题的实际内容之后。中心div off course必须包含正确的，不重复的图像切片以及标题的实际内容。

希望这有帮助！

Answer 3

如果我正在构建此设计，我只需要拍摄粉红色到橙色背景的水平切片（15-20像素左右），并将其设置为repeat-y上的<body>。主要内容周围的粉红色顶部和底部边框看起来就像 - 顶部和底部的粉红色边框。

Answer 4

您无法使用这两个图像准确表达该标题，因为它不是水平或垂直渐变。它在对角线上。但是，您可以使用CSS渐变轻松完成。

http://jsfiddle.net/ZteRf/

background: -moz-linear-gradient(-45deg, #ff3232 0%, #fff989 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff3232), color-stop(100%,#fff989)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* IE10+ */
background: linear-gradient(135deg, #ff3232 0%,#fff989 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#fff989',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

http://www.colorzilla.com/gradient-editor/

Answer 5

在css中使用此代码

   body
   {
   background-image:url("http://s8.postimage.org/r3vb8vx2t/NEIPb.jpg");
   background-repeat:repeat-y;
   }

在http://jsfiddle.net/v4zTT/进行演示（在javascript和结果之间拖动，你可以看到完整的图像）

祝你好运.. :)

背景顶部重复

5 个答案: