0

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

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

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

一如既往的帮助。

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

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

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

G

4

2 回答 2

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);
}

​</p>

于 2012-11-09T14:43:19.897 回答
0

You can achieve this effect with 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);
}

​<code>position:relative;z-index:-1; allows #two to be overlayed by the box-shadow of one.

于 2012-11-09T19:25:48.600 回答