Question

我的问题看起来有点疯狂，但是，我可以做出如下picture所示的事情，我想到了太多的可能性我100％意识到我能做到：

<div id="TheContenaire">
<div><div> <!--this is where i can put a background image or a gradient style using css-->

<div></div> <!--the same thing with this div-->
</div>

但我可以只使用一个div（TheContainer）并使用css sprites和一个图像为它应用两个背景吗？把它放在上面，然后再放在底部并旋转它或任何其他操纵

Answer 1

如果您使用linear-gradient，则无需分层元素：http://jsfiddle.net/e8gyb/

要在没有其他元素的情况下对某些内容进行分层，请使用:after

div {
    position: relative;
}
div:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

关于渐变的好文章：http://css-tricks.com/css3-gradients/
更多演示：http://css-tricks.com/examples/CSS3Gradient/

编辑：适用于IE10 +，对于IE6-9，您需要使用:after：CSS gradient, transparent colors in IE?

Answer 2

<强> HTML

<div></div>

插入阴影选项：

div {
    height: 500px;
    width: 500px;
    box-shadow: inset 0 4em 7em -4em #000000,
                inset 0 -4em 7em -4em black;

}

DEMO

或background-image和gradient：

div:before {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    top: 0%;
    min-width: 100%;
    min-height: 3em;
}

div:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
    top: 100%;
    min-width: 100%;
    min-height: 3em;
}

DEMO

显然，您必须使用实施所需的任何供应商前缀。

使用css sprites </div>的2个背景的<div>

2 个答案: