CSS中空画像遷移遷移初期読み込み背景色ブロック問題解決策_html/css_WEB-ITnose

1. どこから始めますか...

私は数年前に、非常に創造的なテクノロジーを紹介する非常に実践的な記事を書きました。「CSS の背景」の実践的なアプリケーションとカラー中抜き技術の進歩」では、この記事で言及されているアイコンのグラフィックは、色の制御を容易にするために中抜きされています。たとえば、次の画像 (クリックするとランダムな背景色が得られます):

したがって、さまざまな色の効果を実現するには、1 セットの画像だけが必要です。

以下のようなさまざまな状態の完全な 7 つのひょうたん兄弟を組み立てる代わりに、

画像リソースのサイズを節約することに加えて、CSS 中空画像テクノロジーまた、利点の 1 つは、アイコンの色が CSS プロパティによって制御されるため、トランジションを使用して徐々にトランジション効果を実現し、インタラクションをより繊細にすることができることです。

CSS でアイコンの色を制御することになると、当然、アイコン フォント、SVG スプライト テクノロジの使用、または混合モードの使用を思い浮かべます。

ただし、

SVG との互換性、混合モードのコストと環境上の制限の理解などの欠点があります。

したがって、振り返ってみると、写真が最も現実的であることがわかります。以下のデモ実装では、background-image とホバー状態を使用してその効果を見てみましょう。選択状態はテキスト ホバー遷移の両方であり、従来の背景画像では実現できません。

ここをクリックできます: 中空の背景画像の下のトランジション効果

一行:

transition: background-color .25s;

はインタラクションを繊細にすることができます。

デフォルト、ホバー、選択済みの 3 つの色の状態は、一連の写真だけで実現できます (下の写真を参照)。見栄えが良く、いいねが飛びます。

ただし、この実装には致命的な欠陥があります。CSS の読み込みと背景画像の読み込みが同期せず、特に初回読み込み時は画像が非同期になります。明らかな遅延があるため、非常に醜いカラー ブロックが瞬時に表示されることがわかります (デモをスワイプすることで体験できます)。

よく言われるように、「開発は許容できるが、設計は許容できない」ということは、明らかにこの問題は非常に深刻であり、この問題はこのクールに見える手法が危機に瀕することに直結します。デフォルトで非表示になっている要素にのみ適用されるようです。

パニックにならないでください、私はここにいます!

2.base64 URL画像と非同期カラーブロックの問題を解決する

これは、背景画像をbase64 URL画像に変換するためです。はCSSファイルに組み込まれており、基本的には上記が同時に表示され、カラーブロックは存在しません。ただし、この方法には明らかな制限があります。つまり、非常に小さいサイズのいくつかの小さな画像にのみ適しています。上記のデモの背景画像と同様に、サイズが 5K を超え、CSS ファイルに直接埋め込まれています。これは体に成長する腫瘍のようなものであり、base64 レンダリングは比較的パフォーマンスに負荷がかかります。画像が大きいほど遅くなり、IE7 ブラウザが Base64 画像をサポートすることは困難です。

したがって、この方法はここでは適用できません。私を殺すことになりますか?いいえ！

3. コンテンツ URL 画像と非同期カラーブロックの問題を解決する

6 年前、つまり 10 年前に「CSS コンテンツのコンテンツ生成技術と「アプリケーション」の CSS コンテンツ URL 画像コンテンツ生成技術は、画像を直接挿入できる疑似要素の前後にあります。要素の背景画像ではなく直接画像であることに注意してください。構文は次のとおりです:

.demo:after { content: url(xxx.png); }

ページを観察した場合は、画像を読み込むときに、ブラウザーが元のサイズを取得する前に、画像の幅/高さが HTML 属性や CSS 値によって制限されていない場合には、この現象に注意する必要があります。画像の占有スペースは 0 です。新浪微博を更新すると、ページの高さが上がり続けることがわかります。このため、画像のサイズを制限しないこの方法は、Web ページのレイアウトでは推奨されません。これは、ページ レイアウトが再描画され、読み込みのパフォーマンスに影響を与えるためです。

しかし、ここでは、画像がロード時に占有するスペースが 0 であるという特徴をうまく利用して、カラーブロックの問題を回避できます。つまり、次のコードに示すように、要素の背景画像 URL 値を擬似要素のコンテンツ URL 値に変更し、同時に背景位置の位置を相対位置などの他の位置に変更します。

.icon {    width: 140px; height: 140px;    background: #c8c8c8 url(icon.png) no-repeat 0 -140px;}↓.icon {    /* 注意，只设高度不设宽度 */    height: 140px;    background-color: #c8c8c8;    overflow: hidden;}.icon:after {    content: url(icon.png);    position: relative;    top: -140px;}

上記の緑色のコメント「「高さのみを設定するが幅は設定しない」のみが実装の鍵を示しています:

ページのレンダリング プロセスは次のとおりです。1. CSS の読み込み、2.対応する DOM レンダリング、背景色が表示されます。 3. 背景画像に対応する DOM スタイルをプルします。

従来の実装には 2 ～ 3 の問題がありました。画像がサーバーに再要求されるため、時間差が発生し、カラーブロックが発生します。ここでの実装は異なります。背景色が表示されても画像が読み込まれていない場合は、CSS が要素の幅を設定しておらず、画像が読み込まれていないため、幅は 0 になります。したがって、3 は で完了します。 2 次に進むと、要素全体の高さは 140 ピクセル、幅は 0 になります。これは、要素が非表示であることを意味します。つまり、背景色はありますが、サイズが 0 であるため、画像が要求されると、要素は自然に塗りつぶされます。背景色もブロックされます。時差がないのでカラーブロックの問題もバッチリ解決！

ここをクリックできます: カラーブロックの問題を解決するためにコンテンツ URL によって生成されたデモ

IE7 ブラウザ

何歳ですか? 、および IE7 ブラウザー。必要に応じて、式を使用することも、JS で直接パッチを適用することもできます。兄弟、これらのブラウザーは現在サポートしません。

4. 結論

私のテストでは、Chrome ブラウザーでは時間の違いがより顕著であることがわかりました。また、最後のコンテンツの URL は、一定の可能性があります。ロジックによると、もう遅いです。もう 2 時です。

この記事はオリジナル記事であり、頻繁に更新され、一部の間違いは修正されますので、転載する場合は（画像を直接リンクしないでください）お願いします。トレーサビリティを容易にし、誤った知識による誤解を避けるために元のソースを保持し、より良い読書体験を提供します。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5267

(この記事はここまで)