background-size
IEでCSSスタイルを機能させる既知の方法はありますか?
:hover
、背景のサイズを全幅300ピクセル(background-size:auto)に変更して、ズームの錯覚を作成します
background-size
IEでCSSスタイルを機能させる既知の方法はありますか?
:hover
、背景のサイズを全幅300ピクセル(background-size:auto)に変更して、ズームの錯覚を作成します
回答:
少し遅れますが、これも役に立つかもしれません。適用できるIE 5.5以降用のIEフィルターがあります。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
ただし、これにより、画像全体が割り当てられた領域に収まるように拡大縮小されるため、スプライトを使用している場合、問題が発生する可能性があります。
position: relative; z-index: 999
このような
私はjquery.backgroundSize.jsを作成しました:「カバー」および「含む」値のIE8フォールバックとして使用できる1.5K jqueryプラグイン。見ていデモを。
background-position: fixed
。
この投稿のおかげで、クロスブラウザーの幸せのための私の完全なcssは次のとおりです。
<style>
.backgroundpic {
background-image: url('img/home.jpg');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/home.jpg',
sizingMethod='scale');
}
</style>
このコードを作成してから長い時間が経過しましたが、ブラウザの互換性を高めるために追加したいと思います。これをCSSに追加して、ブラウザの互換性を高めます。
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
後でさえ、これも役に立つかもしれません。background-size:coverのポリフィルとして使用できるjQuery-backstretch-pluginがあります。私は、css-background-urlプロパティをjQueryで取得し、それをjQuery-backstretchプラグインにフィードすることが可能(かつかなり単純)である必要があると思います。modernizrでbackground-size-supportをテストし、このプラグインをフォールバックとして使用することをお勧めします。
backstretch-pluginはSOでここに言及されていました。jQuery-backstretch-plugin-siteはこちらです。
同様に、状況(背景サイズ:100%)およびIE8-で背景サイズを機能させるjQueryプラグインまたはスクリプトを作成できます。だからあなたの質問に答える:はい、方法はありますが、ATMにはプラグアンドプレイのソリューションはありません(つまり、自分でコーディングを行う必要があります)。
(免責事項:私はbackstretch-pluginを徹底的に調べていませんが、background-size:coverと同じように機能しているようです)
そのための良いポリフィルがあります:louisremi / background-size-polyfill
ドキュメントを引用するには:
backgroundsize.min.htcを、IEが必要とするMIMEタイプを送信する.htaccessとともにWebサイトにアップロードします(Apacheのみ— nginx、ノード、IISに組み込まれています)。
CSSでbackground-sizeを使用するすべての場所で、このファイルへの参照を追加します。
.selector { background-size: cover; /* The url is relative to the document, not to the css file! */ /* Prefer absolute urls to avoid confusion. */ -ms-behavior: url(/backgroundsize.min.htc); }
contain
をサポートしcover
ます。1つのネットワークパケットで転送されるため、5.7KBはそれほど悪くありません。
このファイル(https://github.com/louisremi/background-size-polyfill “ background-size polyfill”)をIE8に使用すると、本当に簡単に使用できます。
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
私は次のスクリプトで試しました-
.selector {
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}
それは私のために働いた!