CSS设计与图像

我有以下链接：

如果你看左上角的花的话，这种风格会被大量使用。这是使用 差不多

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

上部花部图像
下花部图像

还是使用z索引

特别是在代码读取的位置附近，这显示了底部部分 上面的某个地方显示了花的上部

是否将图像切片以创建该效果

---

有没有简单的例子来突出这个效果？

看看源代码。他们使用非语义类，如

decor-1

，背景图像绝对位于站点的其余部分

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

---

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

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

这是用来实现这一点的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;
}

---

可能它是被切片的，而不是用position:absolute定位的，然后使用z-index将图像强制到前面。这只是被击败了，但也是正确的。