web-dev-qa-db-ja.com

線形勾配で背景画像をIE 11で動作させるには？

background-image with linear-gradient作業するIE 11？

次のコードは、IE 10では正常に動作しますが、IE 11では動作しません。

background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);

linear-gradientで作業するにはIE 6-9、11は次のfilterを使用しますが、この場合背景画像は表示されません。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )

私はアイデアを受け入れています。

更新：ここに私が持っているコードがあります。

background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );
cssbackground-imagelinear-gradientsinternet-explorer-11
18
Vadim

linear-gradient()は、IE10 RTM以降、IE11を含む）で接頭辞なしでサポートされます。_-ms-_接頭辞は不要です。 これらのバージョンはもう動作しません 。CSSにプレフィックスを含めるだけでスペースを無駄にしています。

linear-gradient()の方向構文は異なることに注意してください。もともとtopであったものは、代わりに_to bottom_として表されます（ このブログ投稿 、 この質問 、および spec）を参照してください 詳細）：

_background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
_
21
BoltClock

狂ったね？

IE 11の前、

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');

IE 11：

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

そうです、古いIEのサポートを心配する必要があるだけでなく、NEWER IE癖も同様に対処する必要があるようです...

10
Hank

これらはすべて非常に優れたソリューションですifテキスト上に線形グラデーションを直接オーバーレイしています。しかし、画像の上に表示したい場合、IEでは機能しません。理由を聞かないでください。

私は多くのリソースを掘り起こし、最終的にこれに遭遇しました diddy

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

これをIE 10+のセレクターで囲みました。グラデーションオーバーレイとコンテンツをブレンドするのに役立つように、不透明度を含める必要があります。

これが誰かを助けることを願っています！

1
shaneonabike

私は同じ問題に直面し、フィルターと線形勾配を行うことに加えて、CSSクラスにwidthを追加する必要がありました。幅を設定すると、背景付きのカスタムスタイルを見ることができました勾配。

0
Swetha Sankaran