css - 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

看源头。他们使用非语义类，例如decor-1绝对位于站点其余部分的背景图像。

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

Answer 2

是的，图像被分割成多个部分，然后设置为容器上的背景图像......

你可以在这里看到其中一个切片...

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;
}