1

IE9 を除くすべてのブラウザーで完全に機能する、サイト全体の背景として水平グラデーションのバーを生成しています。

グラデーション自体は機能しています。青いバーの高さを制限したいだけです。Safari/Firefox/Chrome で確認してから IE9 で確認すると、要素全体が青色のグラデーションで塗りつぶされていることがわかります。

CSS を使用した水平グラデーション バー

ここに私のCSSがあります:

#inner {
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 35%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(35%,#0057be));
background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -o-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: linear-gradient(to bottom,  #1e5799 0%,#0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;

}

4

1 に答える 1

3

このコードは IE9 で動作するはずです:

background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);

Visual CSS Gradient Generatorで作ってみました

更新された CSS:

#inner {
background: #1e5799;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #1e5799), color-stop(35%, #0057be));
background: -webkit-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -moz-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -ms-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -o-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: linear-gradient(to bottom, #1e5799 0%, #0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;
}

IE9 は CSS3 グラデーションをサポートしていませんが、インライン SVG をサポートしています。IE9 で SVG 背景を混同することはお勧めしません。ポール アイリッシュによるこの記事でfilter説明されているように、条件付きコメントを使用するのが最善の方法だと思います。

于 2012-10-09T10:39:09.090 に答える