0

私は以下のリンクを持っています：

http://www.noupe.com/

左上の花を見ると、このスタイルがよく使われています。これは次のようなものを使用して行われますか

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

またはz-indexを使用していますか？

具体的には、コードが読み取る場所の周辺<div id="header" > </div>これは花の下部を示し、上のどこかは花の上部を示しています

その効果を生み出すために画像がスライスされていますか？

この効果を強調する簡単な例はありますか？

4

2 に答える 2

1

ソースを見てください。decor-1それらは、サイトの残りの部分の上に絶対的に配置される背景画像などの非セマンティッククラスを使用します。

#main .decor-1 {
background: url(image) no-repeat;
width: 584px;
height: 211px;
position: absolute;
left: -97px;
top: -123px;
}
于 2012-10-19T19:30:50.217 に答える
0

はい、画像は複数の部分にスライスされ、コンテナの背景画像として設定されます...

ここでスライスの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;
}
于 2012-10-19T19:32:51.273 に答える