0

誰かが助けてくれるなら、私は少しCSSの問題を抱えています。

添付の画像は、divの下部の背景画像として使用したいスライスされた領域を示しています。私はこれを無駄に試しました。

また、ページの下部の境界線画像として使用しようとしましたが、それを機能させることができなかったようです。これはCSSでグラデーションを使用しているため、下に予備のdivを追加するのではなく、既存の#main 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

この効果は次の方法で実現できます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; #twoのボックス シャドウを重ねることができますone。

于 2012-11-09T19:25:48.600 に答える