1

CSS3プロパティを使用して影の背景を連続して適用しようとしましたがbackground-size、最近のブラウザでは例外として、以下のIE8を受け入れます。

次に、この投稿で言及されているIEのソリューションを入手しました（ IEでバックグラウンドサイズを機能させる？）

上記のソリューションは、以下のIE8でも機能しますが、画像を比例して（水平方向と垂直方向の両方で）拡大縮小します。

ただし、以下で説明するCSS3プロパティで達成したように、水平方向にのみスケーリングする必要があります。 

background-size: 100% 25%;

/*
    100% for horizontally
    25% for vertically
*/

私の質問：最近のブラウザのCSS3プロパティで得たように、必要な結果を得るためにsizingMethod、画像を水平方向または垂直方向（または他の回避策[^ jQuery / Javascript ^] ）のいずれかでのみスケーリングする値はありますか？background-size

これが私が使用した私のコードです：

CSS：

 .row-shad {
     background:url(../images/cat-bot-shad.png) center bottom no-repeat;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='http://full-path-to-images/images/cat-bot-shad.png',
    sizingMethod='scale'); /*For IE 8 and less*/

    background-size: 100% 25%; /* for good browsers*/
}

---これがライブ結果です。優れたブラウザとIE8で、違いを確認してください。---

この点での助けは本当にありがたいです。

ありがとう！

4

2 に答える 2

4

方法1：背景色を修正

背景が常に同じ色である場合は、次のような画像置換を使用できます。

例1

スケーリングすると、比率が尊重されます。

デモ（テスト済みでIE8で動作）

方法2：透明な背景

（上記の方法を使用して）透明な背景が必要な場合は、IEのPNG透明性の問題を解決するために複数のフィルターを追加する必要があります。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='http://full-path-to-images/images/cat-bot-shad-ie.png',
    sizingMethod='scale')
    alpha(opacity = 100); /*For IE 8 and less */

そして、元のbackground宣言を上書きするための条件付きコメントスタイル：

<!--[if lt IE 9 ]> 
<style>
.row-shad { background:none; }
</style>
<![endif]-->

デモ（テスト済みでIE8で動作）

ちなみに、タグで条件付きコメント<html>を使用すると、IE8以下を簡単にターゲットにできます。

HTMLタグ：

<!--[if lt IE 9]> <html class="ielt9"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

CSS：

.ielt9 .row-shad { background:none; }

IE7の問題

あなたの方法はIE7では機能しません。

CSSハックとIE7用のカスタム背景画像（世界中のユーザーの2％未満）を追加することで、優雅なデグラタディオンの方法でアプローチできます。

*background:url(../images/cat-bot-shad-ie7.png) center bottom repeat-x;

*propertyIE7以下のみを対象としています。または、条件付きコメントを使用して簡単に行うことができます。

デモ（テスト済みでIE7-8で動作）

方法2とIE7ハックを組み合わせる

最終的に、IE8の透明なpngとIE7のカスタム画像の両方を使用するには、複数の条件付きコメントを使用する必要があります。

<!--[if IE 8 ]> 
<style>
#row { background:none; }
</style>
<![endif]-->
<!--[if lt IE 8 ]> 
<style>
#row { background:url(../images/cat-bot-shad-ie7.png) center bottom no-repeat; }
</style>
<![endif]-->

デモ（IE7-8でテストおよび作業中）

または、条件付きhtmlタグ：

<!--[if lt IE 8]> <html class="ielt8"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

CSS：

.ie8 .row-shad { background:none; }
.ielt8 .row-shad { background:url(../images/cat-bot-shad-ie7.png) center bottom no-repeat; }
于 2012-10-01T13:06:01.327 に答える
0

残念ながら、IE 8以下を100％/ 100％と異なるスケールにする方法はありません。つまり、これを別の方法で行う必要があります。

1つの方法は、画像を要素に適合させることです。

要素は要素の高さの25％なので、画像を4倍高くし、空のスペースを透明または背景色で塗りつぶしてから、CSS3プロパティを使用するブラウザ100%の代わりにスケールの高さをに変更します。25%

background-size: 100%;

ランレングスエンコードされたPNGを使用しているため、これにより画像に非常に少量のデータが追加され、すべてのブラウザで問題なく機能します。

これを行う他の唯一の方法は、25％の高さのダミー要素を追加し、要素の通常のコンテンツの背後に表示することです。これは非セマンティックであり、可能な場合は避ける必要があります。

于 2012-09-27T06:40:14.403 に答える