1

1つのテーブルセル（td）で2つの色を使用する方法と、それらを相互にオーバーフローさせる方法を知っている人はいますか？

例として。私のウェブサイト（www.ericversteeg.nl）では、ゲストブックのタイトル列で、セルの上部が明るい紫色、下部が濃い紫色で使用したいと考えています。

私はtdでクラスを割り当てる必要があると思います。

しかし、CSSでクラスを作成するにはどうすればよいですか？

あいさつエリック

4

5 に答える 5

2

CSS 3ドラフトでは、グラデーションカラーが導入されています。

例えば

background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);

ブラウザのサポートは普遍的ではないことに注意してください。

于 2012-05-01T13:48:50.833 に答える
0

これを行うにはいくつかの方法があります。1つ目は、上部にdivを、下部にdivを配置し、それぞれ異なる色にすることです。

<td class="multi_purple">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
</td>

2つのdivをそれぞれの色でスタイリングします。

「より良い」オプションは、適切な色の背景画像を使用することです。これはクロスブラウザでサポートされますが、テーブルのサイズが拡大または縮小した場合はうまくいきません。

最新のオプションは、グラデーションを追加することです。この構文については、http：//www.css3please.comを確認してください。

でもこんな感じ

background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);

もちろん、紫の色合いがあります。

これは、グラデーションをサポートしていないブラウザでは単色になります（6/7を見てください）。

于 2012-05-01T13:47:43.337 に答える
0

私はこのツールが非常に役立つことを発見しました：CSS3グラデーションジェネレーター。それが生成するコードは最も美しいものではありませんが、機能します！

于 2012-05-01T13:48:10.390 に答える
0

提案されたような背景グラデーションを使用することも、両方の色を含む背景画像を使用することもできます。

セルの高さが30ピクセルになることがわかっている場合は、高さ30ピクセル、幅1ピクセルの画像を作成し、必要な場所に分割して、両方の色を使用します。次に、cssを使用します。

td {
  background-image: url(colors.png);
  background-repeat: repeat-x;
}

それを水平に並べて、あなたが求めている効果を得る。

于 2012-05-01T13:49:14.460 に答える
0

これはあなたが探しているものですか？

http://jsfiddle.net/4NXRx/2/

背景のグラデーションを使用しているため、画像リソースを呼び出す必要はありません。また、画像の更新について心配する必要はありません。

グラデーションをサポートしていないブラウザ用のバックアップカラーがあります。これはすべての訪問者にとって重要ではない効果であるため、一部の訪問者がグラデーションを表示しなくても大したことではありません。

私は49％で停止したので、段階的な変化はないことに注意してください。それがあなたが望むものかどうかはわかりません。明らかに、より良い色を選択する必要があります。

table td {
padding: 10px;

background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);

background-image: -webkit-gradient(
    linear,
    right 49%,
    right 50%,
    color-stop(0.08, #CEC3FA),
    color-stop(0.51, #B9AAD1)
);
于 2012-05-01T18:19:04.863 に答える