1

コードはこちら: http://jsfiddle.net/xEULj/

#rt-header {
width: 600px;
z-index: 2;
position: relative;

background: -webkit-linear-gradient(left, red, red 40%, green 40%, green);
background: -moz-linear-gradient(left, red, red 40%, green 40%, green);
background: -o-linear-gradient(left, red, red 40%, green 40%, green);
background: -ms-linear-gradient(left, red, red 40%, green 40%, green);
background: linear-gradient(left, red, red 40%, green 40%, green);
}

IEでこれを実現する方法はまだありますか? まだ見つけていない回避策はありますか？私は実際に、これが IE10 では機能しないことを知りました。ここから来ると思いました: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.htmlですが、そうではないと思います。

アイデアはありますか、それとも画像を使用する必要がありますか?

4

3 に答える 3

3

以下に IE10 のサポートがあり、緑から赤へのグラデーションがあります。

このデモをチェック

#rt-header
        {
    background: #ff3232; /* Old browsers */
    background: -moz-linear-gradient(left, #ff3232 1%, #ff2828 49%, #3fff30 49%, #3fff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ff3232), color-stop(49%,#ff2828), color-stop(49%,#3fff30), color-stop(100%,#3fff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* IE10+ */
    background: linear-gradient(to right, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#3fff00',GradientType=1 ); /* IE6-9 */
        }
于 2013-08-14T16:56:47.900 に答える
1

to キーワードを使用する必要があるかもしれないと思います。

background: linear-gradient(右へ、赤、赤 40%、緑 40%、緑);

于 2013-08-14T17:03:15.323 に答える