0

次の CSS ステートメントに不透明度を追加するにはどうすればよいですか?

background: none repeat scroll 0 0 #205081;

css2で可能性はありますか? それ以外の場合、css3 から opacity ステートメントを追加するにはどうすればよいですか?

4

2 に答える 2

1

悲しいことに、世界中のさまざまなバージョンとブラウザーの種類により、JavaScript の介入なしにすべてのブラウザーで互換性のある単一の CSS エントリはありません。ただし、複数のスタイリング手法を使用して、「if IE 7」HTML をヘッドに使用して最新のコードを好まないブラウザーに対処することができます。

ブラウザ間の互換性を最大限に高めるために考慮すべきさまざまな方法を次に示します。

古いブラウザに別の方法を追加する

新しいバージョンの Internet Explorer で透明な背景が必要な場合、最も簡単な方法は、古いコードを使用して古いバージョンのブラウザー用にスタイルを設定することです。次のコードを

<head>
</head>

HTML または PHP ファイルのセクション。

HEAD 内の HTML

次のコードがまだ配置されていない場合は、追加する必要があります。現在、多くのフレームワークと CMS にはこれが含まれているため、編集する前にソースを表示し、まだ追加されていない場合にのみ追加してください。

<!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]-->

透明度 50% の PNG ファイルを作成する

フォトショップまたはその他の優れた代替ツールをロードして、1x1 ピクセルの新しいファイルを作成し、新しいレイヤーを追加して背景を削除するだけです。次に、レイヤー内で使用する色で塗りつぶし、このレイヤーの不透明度を 50% にします。次に、PNG として保存し、ホスティングにアップロードします。ページの読み込み時間が気になる場合は、PNGCrush または Smush.it を使用してその PNG を 0.5kb 未満に圧縮できます。

CSS にこれを追加します (IF 7 / 6 などを使用する必要があります)。

.ie6, .ie7, .ie8 .your-div-class-or-id {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=background.png,sizingMethod='scale');
}

}

新しいブラウザ用の CSS

可能な限り、新しいブラウザーには新しいコードを使用する必要があります。PNG を使用して透明な背景を提供しないことは、ファイル フェッチを追加することでページの読み込み時間を増加させないことを意味します。追加するだけです：

background: rgba(32, 80, 129, 0.5)

IE9+、Firefox、Chrome、Safari などの最新のブラウザで動作します

最新の CSS と古い CSS の両方を組み合わせて使用​​する必要があります

RGBA と AlphaImageloader の両方の CSS 要素を使用することに注意してください。そのため、png ファイルは絶対に必要な場合にのみ使用されます。不透明度のある PNG を使用することには多くの人が不利であることを知っていますが、最悪の場合にのみこれを使用し、ロードしません。新しいブラウザを使用する場合。

于 2013-02-12T10:45:16.320 に答える