Question

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

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

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

一如既往的帮助。

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

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

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

Answer 1

以下是使用线性渐变为背景的示例，使用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);
}

Answer 2

您可以使用box-shadow：http://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的框阴影。

图像边界问题

2 个答案: