CSS設計和圖像

Question

我有下面這個鏈接：

http://www.noupe.com/

如果你看一下在左上角的花朵樣式很多使用。這是否使用 類似於

<div> upper flower part image </div> 
<div> lower flower part image</div> 

或者使用z-index？

具體圍繞在碼讀取<div id="header" > </div>這顯示底部的花的 以上某處示出了花

的上部是對圖像切片來創建的效果？

任何簡單的例子來突出這種效果？

Answer 1

是將圖像切成多個部分，然後設置作爲容器的背景圖像...

您可以在這裏看到的片之一...

http://www.noupe.com/wp-content/themes/noupe/images/decor-1.png

以下是用於實現此目的的CSS ...

#main .decor-1 { 
background: url(http://www.noupe.com/wp-content/themes/noupe/images/decor-1.png) no-repeat; 
width: 584px; 
height: 211px; 
position: absolute; 
left: -97px; 
top: -123px; 
} 

Answer 2

看看源代碼。他們使用非語義類，例如decor-1以及絕對位於網站其他部分的背景圖像。

#main .decor-1 { 
background: url(image) no-repeat; 
width: 584px; 
height: 211px; 
position: absolute; 
left: -97px; 
top: -123px; 
}