图像边界问题

时间:2012-11-09 14:28:38

标签: css3

如果有人可以提供帮助,我会遇到一点CSS问题。

附图显示了我想用作div底部的背景图像的切片区域。我试过这个无济于事。

我也尝试将它用作边框图像,仅用于页面底部 - 但似乎无法使其工作。因为这在CSS中使用渐变,任何人都可以告诉我如何在现有的#main div中执行它,而不是在下面添加一个备用div(没有内容顽皮)。

一如既往的帮助。

http://plusonetesting.co.uk/creative/

啊我试图添加图片,但它不会让我这样把图像放在这里

http://plusonetesting.co.uk/creative/screen.jpg

2 个答案:

答案 0 :(得分:0)

以下是使用线性渐变为背景的示例,使用px值而不是更常见的%。

http://jsfiddle.net/byZPb/

#main{
background-image: linear-gradient(bottom, rgb(241,0,105) 5px, rgb(255,27,137) 10px, rgb(40,153,153) 20px);
background-image: -o-linear-gradient(bottom, rgb(241,0,105) 5px, rgb(255,27,137) 10px, rgb(40,153,153) 20px);
background-image: -moz-linear-gradient(bottom, rgb(241,0,105) 5px, rgb(255,27,137) 10px, rgb(40,153,153) 20px);
background-image: -webkit-linear-gradient(bottom, rgb(241,0,105) 5px, rgb(255,27,137) 10px, rgb(40,153,153) 20px);
background-image: -ms-linear-gradient(bottom, rgb(241,0,105) 5px, rgb(255,27,137) 10px, rgb(40,153,153) 20px);
}

答案 1 :(得分:0)

您可以使用box-shadowhttp://jsfiddle.net/YxVEy/

实现此效果
#one{
    height:200px;
    background:-webkit-linear-gradient(top, #f0f0f0 0%,#ddd 100%);
    box-shadow:0px 0px 10px 3px rgba(0,0,0,.35);
}
#two{
    position:relative;
    height:200px;
    background:#def;
    z-index:-1;
    box-shadow:0 0px 10px 3px rgba(0,0,0,.45);
}

position:relative;z-index:-1;允许#two覆盖one的框阴影。