[解決済み] 透過画像で可能な最小のデータURI画像
2022-05-10 11:50:31
質問
私は、スプライトを使用し、いくつかのアイコンの代替テキストを提供できるようにするために、背景画像と透明な1x1の画像を使用しています。
HTTPリクエストの数を減らすために、画像用のデータURIを使いたいのですが 透明な画像を生成するために可能な最小の文字列は何でしょうか。 ?
私は、スプライトの代わりに実際の画像にデータURI:を使用できることを理解していますが、すべてが散在するのではなく、CSSに保持されている場合、保守が容易になります。
どのように解決するのですか?
さまざまな透過GIFで遊んでみたところ、中には不安定でCSSの不具合を引き起こすものがありました。たとえば
<img>
があって、できるだけ小さい透過 GIF を使えばうまくいきますが、その透過 GIF に
background-image
を付けたい場合、これは不可能です。なぜか、以下のようなGIFはCSSの背景が表示されないことがあります(一部のブラウザで)。
より短い(しかし不安定 - 74バイト)。
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
以下のように、少し長めの安定版を使うことをお勧めします。
⇊ 安定版 ⇊ (ただし少し長い - 78バイト)
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
もう一つのヒントとして
image/gif
を省略しないでください。これは、いくつかのブラウザで壊れます。
関連
-
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 背景画像データをCSSにBase64で埋め込むのは良い方法ですか、悪い方法ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】背景-位置の割合の原則の説明
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css