0

こんにちはサー/マダム私はtdの上部と下部で異なる背景を持ちたいです。つまり、前半は緑色で、後半は赤色である必要があります...

4

4 に答える 4

1

CSSグラデーションを使用します。あなたの場合、CSSは次のようになります。

background-image: linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -o-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -moz-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -ms-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(0,255,0)),
    color-stop(0.5, rgb(255,0,0))
);

より多くを生成するためにこのサイトを使用してください：http：//gradients.glrzad.com/

于 2013-03-26T11:10:30.480 に答える
1

これを直接行うには、この機能を背景として画像を設定します。何かのようなもの

style="background-image:url(twocolor.png);"
于 2013-03-26T11:10:35.633 に答える
0

グラデーションを試してください：

td {
    background: #00ff00;
    background: -moz-linear-gradient(top,  #00ff00 0%, #00ff00 49%, #ff0000 50%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(49%,#00ff00), color-stop(50%,#ff0000), color-stop(100%,#ff0000));
    background: -webkit-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: -o-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: -ms-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: linear-gradient(to bottom,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=0 );
}

このグラデーションを編集するには、これを使用します。

于 2013-03-26T11:10:28.227 に答える
0

グラデーションが気に入らない場合に備えて（楽しみのために）。http://codepen.io/anon/pen/mqdvB

于 2013-03-26T11:14:20.443 に答える