角を丸くする別の方法。 1枚の写真。 透明性 IE6

角を丸くする別の方法を提案します。 1つの画像が使用され、おそらくアルファチャネルが使用されます(IE6でも機能します)。

たとえば、 2つのデモページを作成しました。 IE6で不透明な画像と透明度を使用する場合のコードはまったく異なります。

残念ながら、IE6の式(透明な画像の例)なしではできませんでしたが、非常に軽量です。



理論



この方法の理論的基礎は非常に単純です。 角のある画像(特別な方法で配置、以下を参照)を作成し、レイアウトの最大ボリュームでコンテンツの合理的なスケーリングと可用性を使用してこれらの同じ角と境界を正しく表示できるサイズにする必要があります。 この例では、3000x1000ピクセルの画像を使用しましたが、画像のサイズを大きくすると、そのボリュームがわずかに増加します。

このソリューションでは、1つのメインユニットと3つの補助ユニットを使用します。

メインブロックの場合、左上隅がメインブロックの左上隅になるような距離まで、背景を左にシフトする必要があります。

表示するには補助ブロックが必要です。



補助ブロックは絶対に配置され、メインブロックのエッジに対する必要な(フィレット半径に応じた)オフセットが設定されます。

写真の説明:

1.背景画像。

画像

2.メインブロックと補助ブロック。

画像

透明な画像を持つバリアントの場合、理論は同じです。



厳しい現実



この理論は最新のブラウザではうまく機能しますが、ハックを使用してIE6でソリューションを実装する必要があります。

不透明な画像で解決するには、問題はIE6でブロックオフセットを上下または左右に同時に設定できないことにあります。 解決策2:式を使用してオフセットを「エミュレート」するか、補助ブロックのサイズを指定してコンテナーの外側に拡張し、オーバーフロー:コンテナーに対して非表示にします(これは私が行いました)。

アルファチャンネル付きの画像を使用する場合、事態はさらに悪化します...

IE6でこのような画像を表示するには、AlphaImageLoaderフィルターを使用します。これは、画像の左上隅と、適用される要素の左上隅を組み合わせます。 この場合に背景の配置をエミュレートするには、追加の補助要素を使用し、フィルターを使用してそれらに画像をロードし、配置して、丸みを帯びた1つまたは別のセクションを表示する必要があります。 この例は、私の例で見ることができます。



All Articles