CSS、1つの表のセルで2種類の色を使用できますか？ （例えば、濃い紫色と薄い紫色）

Question

誰もが1つのテーブルセル（td）で2つの色を使う方法を知っています。

については、私のウェブサイト（www.ericversteeg.nl）のために、私は私のゲストブックのタイトル列の中の薄い紫色をセルの上に、濃い紫色を下に使いたいと思います。

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

しかし、どのように私はCSSで自分のクラスを作るのですか？

挨拶Eric

Answer 1

私は、このツールは非常に参考になった（6/7、すなわちあなたに見ているの？）：CSS3 Gradient Generator。それが生成するコードは最も美しいものではありませんが、動作します！

Answer 2

これを行うにはいくつかの方法があります。最初はdivを上に、divを下に、それぞれ異なる色で表示します。

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

のようなその何か。

これはサポート勾配いけないブラウザ用のソリッドカラーに分解

Answer 3

CSS 3 draftsはグラデーションカラーを導入しています。

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

browser support is not universalに注意してください。

Answer 4

提案されたような背景勾配を使用することも、両方の色を持つ背景画像を使用することもできます。

セルが30pxの高さであることがわかっている場合は、30pxの高さで1pxの幅の画像を作成し、必要に応じて分割して両方の色を入れます。次に、cssを使用して：

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

このように、あなたが後になっている効果を得る。

Answer 5

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

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