0

I'm trying to wrap my website differently so that the background is divided in 2. The gray part which is the main background but also a white part which is smaller and wrap the main-content.

Basically I'd like this to look like this.

I'm not quite sure how to add the images to create that shadow effect and I also don't know how to create that white wrapper.

4

2 回答 2

0

我不建议使用图像。太大了。这里有两种方法。不要忘记这rgba()在 [lte ie 8] 中不起作用（我认为？）。此外，我使用了:before伪，以便将其放置在元素之前，但您可能会发现这不是必需的。但是使用伪元素，您可以定位您的效果。

#element:before{
    background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    content:'';
}
#element{
    background:#CCCCCC;
}

而对于 ie（我真的会推荐它。老实说，我不会打扰 ie 哈哈）只使用十六进制颜色，使用身体的背景颜色。

#element{
    background:linear-gradient(top,#000000 0%, #CCCCCC 100%);
}

除了 lte ie 9 无论如何都不能使用线性梯度属性！

另一种方法是使用box-shadow，但这不会实现您正在寻找的透明渐变。

#element{
    box-shadow:0px 0px 3px #000000;
}
于 2013-04-21T08:45:47.220 回答
0

对了看了一眼。让我知道结果。

.main-content{
   background:#FFFFFF;
   width:90%;
   margin:0% 4% 0% 5%;
}

简单的解决方法：

.main-content{
    -webkit-box-shadow:0px 0px 3px 5px #000000;
    -moz-box-shadow:0px 0px 3px 5px #000000;
    -o-box-shadow:0px 0px 3px 5px #000000;
    box-shadow:0px 0px 3px 5px #0000000;
}

或您要求的渐变：

.main-content:before{
    background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    content:'';
    z-index:98;
    position:relative;
    width:105%;
    height:400px;
    left:-2%;
}

但这种渐变方法仅适用于支持“webkits”及其更新的对应部件的浏览器。但我还没有真正测试过它，所以你可能想玩弄它等等。如果你不喜欢它，试试这个box-shadow方法:)

您需要调整元素div.bann以纠正一些定位错误。元素中有 a，因为元素比图像高。

.bann{
    width:90%;
    height:auto;/*probably can remove this*/
    margin:0% 4% 0% 5%;
    padding:0px;
} 
.bann>img{/*not required if you haven't adjusted the image. You can remove this completely.*/
    width:100%;
    height:auto;
}
于 2013-04-21T09:41:19.360 回答