1

まず、私はデザイナーではなく、css/xhtmlコーダーでもないことを皆さんに伝えたいと思います。私は私の友人の一人にこの質問をしています、彼は斜めの勾配があるサイトで働いています（それは基本的に勾配がXとYの両方の方向にあることを意味します）、それで彼は画像をスライスするのに問題がありますXとYの両方向の勾配を維持するような方法で、スライスした画像を背景に塗りつぶすことができるようにします。

つまり、グラデーションがX方向のみである場合、通常、垂直方向の1px幅の画像をスライスします。同様に、グラデーションがY方向のみの場合、通常、水平方向の1pxの高さの画像をスライスします。しかし、勾配がX方向とY方向の両方にある場合はどうなりますか？この場合、画像をどのようにスライスするか、またはCSS / XHTMLでどのように実装できますか？

どうもありがとう

プクラジ

4

2 に答える 2

4

あなたの友人は、最新の非 IE ブラウザーでのみ動作することに問題がない限り、CSS でこれを行うことを検討する必要があります。

例: http://jsfiddle.net/h9rpE/2/

html, body {
    font: bold 20px Helvetica, Arial, sans-serif;
    height: 100%;
}
body {
    background: white -moz-linear-gradient(135deg, black, white) fixed;
    background: white -webkit-gradient(linear, left top, right bottom, from(white), to(black)) fixed;
}

または、background-size を使用できます。

例: http://jsfiddle.net/rLttj/2/

body {
    background: white url('http://dropbox.smallparade.com/grad.jpg') no-repeat fixed;
    -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;
}
于 2010-11-14T00:15:11.900 に答える
0

単純。まったく接合しないでください。背景画像全体を取得して、タグでCSSのbackgroundディレクティブを使用するだけです。bodyあなたが遭遇しているのを私が見ることができた唯一の問題はあなたのグラデーション画像の幅です。（たとえば）幅が1024ピクセルで、クライアントが1920ピクセルを揺らしている場合、多くの白が表示されます。あなたのモニターの人口統計が誰であるか、そしてあなたのレイアウトを知らずに答えるのは少し難しいです。

于 2010-11-13T03:00:19.737 に答える