背景頂端重複

-1

我正在將this design轉換爲HTML格式的&。背景頂端重複

因爲左側部分和右側部分沒有使用相同的圖像文件，所以在重複背景頂部時，我會陷入困境。我試過使用this trick，但它不適用於我。

我想重複這些文件，並有頭在中間（header.jpg）：

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

我也嘗試過背景位置，但沒有爲我工作。

我該怎麼做我的朋友？

謝謝。

來源

2013-01-17 Zulhilmi Zainudin

以下是標題URL：http://i.imgur.com/vRy9S.jpg –

我不知道我理解你的問題，但我認爲這是你所追求的：
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，並將它們絕對地放在標題的實際內容之後。中心隔離課程必須包含正確的，不重複的圖像片段以及標題的實際內容。

希望這會有所幫助！

來源

2013-01-17 20:04:06 Pevara

謝謝你，我的朋友。它的工作！ :) –

如果我正在構建這種設計，我只需將粉紅色的水平切片（15-20像素左右）切換到橙色背景，並在<body>上將其設置爲repeat-y。主要內容周圍的粉紅色頂部和底部邊框看起來就是這樣 - 頂部和底部的粉紅色邊框。

來源

2013-01-17 19:19:43 KatieK

謝謝我的朋友。 –

或許應該更好地重複背景，並將其作爲包裹所有網站內容的背景，或者類似這樣的東西......並剪切更大的作物......不僅僅是1個像素高度，而是關於50-60

來源

2013-01-17 19:21:20

謝謝我的朋友。 –

由於不是水平的或垂直漸變，因此無法準確地表示該標題與這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-17 19:26:47 cimmanon

謝謝我的朋友。很好的選擇。 –

使用此代碼在你的CSS

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

演示在http://jsfiddle.net/v4zTT/（將插圖中的JavaScript和結果，你可以看到完整的圖像）

好運氣.. :)

來源

2013-01-17 19:27:17 Venkat

謝謝你，我的朋友。但是，這不是我想要的。我想重複-x左上角和右上角的圖像。標題圖片在中間。 –

背景頂端重複

回答

相關問題