-1

我正在将此设计转换为 HTML 和 CSS 格式。

当谈到重复背景顶部时，我被卡住了，因为左侧和右侧没有使用相同的图像文件。

我试过使用这个技巧，但它对我不起作用。

我希望重复这些文件并将标题放在中间（header.jpg）：

我也尝试了背景位置，但对我不起作用。

我该怎么办我的朋友？

谢谢你。

4

5 回答 5

1

也许最好重复背景并成为 w 的背景，<div class=wrapper>它包含所有网站内容，或者类似的东西......并切割更大的作物......不仅仅是 1 像素高度，而是大约 50-60

于 2013-01-17T19:21:20.443 回答
1

我不确定我是否理解你的问题，但我认为这就是你所追求的：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 必须包含正确的、非重复的图像切片和标题的实际内容。

希望这可以帮助！

于 2013-01-17T20:04:06.453 回答
0

您无法用这 2 张图像准确地表达该标题，因为它不是水平或垂直渐变。它在对角线上。但是，您可以使用 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/

于 2013-01-17T19:26:47.543 回答
0

在您的 CSS 中使用此代码

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

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

祝你好运..：）

于 2013-01-17T19:27:17.567 回答
0

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

于 2013-01-17T19:19:43.833 回答