0

我的问题看起来有点疯狂，但是，我可以做出如下图所示的事情吗？我想到了太多的可能性
，我 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 和一个图像为其应用两个背景吗？把它放在顶部，然后再放在底部并旋转它
或任何其他操作

4

2 回答 2

2

如果您使用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 渐变，IE 中的透明颜色？

于 2013-08-02T16:09:40.423 回答
0

HTML

<div></div>

嵌入阴影选项：

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

}

演示

或使用background-imageand 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;
}

演示

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

于 2013-08-02T16:13:18.793 回答