以下のコードがieで機能しないのはなぜですか?
background-image: url(../images/bg_top3.jpg), url(../images/gradient.png);
background-repeat: no-repeat, repeat-x;
background-color: #fff;
background-position: center top, left top;
CSS3パイを使用して、ieで複数の背景を使用できます
#myElement {
background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}
詳細については、@ http://css3pie.com/documentation/supported-css3-features/#pie-backgroundをご覧ください。
編集:パイの動作を使用する必要があるルールに動作プロパティを追加する必要があります。
以下を追加することで、すべてのタグに適用できます。
*{behavior: url(/PATH-TO/PIE.htc);}
しかし、これには膨大なパフォーマンス コストが伴います。css3 PIE を使用する必要がある要素に
クラスを追加し、次を使用してそれをターゲットにすることをお勧めします。pie
.pie {behavior: url(/PATH-TO/PIE.htc);}
IE8 の場合は、以下のようにハックしてみてください 詳細についてはリンクを参照して ください
/* IE8 マルチ背景画像にしましょう */
#multipleBackgroundImages {
background-image: url(../images/lilys.jpg);
background-position: bottom right;
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')";
border: 1px solid black;
padding: 0 1em;
}