適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析
<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワーク コストを削減するために 8 つの背景画像リクエストを 1 つに変更するなど、いくつかの最適化を行いました。実は、これらは簡単なヒントにすぎません。写真の切り取りに非常に厳格にこだわる場合、1px の非対称性があると問題が発生します。以下の例の切り取り分析に注意してください。
RAR:モジュール.zip
説明書
画像切り取り解析

鍵となるのは、部分的に透明な背景画像を使用し、適応的に拡張された各 XHTML 部分の背景を読み取るための追加の <SPAN> タグを追加して、拡張された背景を左または右、または上下に交互に埋めることです。 IE が 100% の高さに到達できない問題を解決するために、左右の拡張高さは 3000px の絶対値単位 (必要に応じて調整) として記述されます。
欠点:
背景画像は透明である必要があるため、JPG 形式の画像は使用できません。 (誰かがこの問題を解決してくれることを願っています)

<<:  dockerでopenGaussデータベースを構成する方法の詳細な説明

>>:  MySQL 権限制御の詳細分析

推薦する

MySQL 5.6.22 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL5.6.22のインストールと設定方法の具体的なコードを参考までに共...

ubuntu16.04でNFSサービスを構築する方法

NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...

Linuxにログインする際の文字セットの問題を解決する方法

文字セットエラーは常に存在するロケール: LC_CTYPE をデフォルト ロケールに設定できません:...

Element-uiはテーブル内のセルを直接クリックして編集します

目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...

jQueryは従業員情報の追加と削除の機能を実装します

この記事では、従業員情報の追加と削除の機能を実装するためのjQueryの具体的なコードを参考までに共...

IDEA は Docker プラグインを使用します (初心者向けチュートリアル)

目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

mysql5.7.19 解凍版の詳細なインストール チュートリアル (純粋なクラックされた中国語版 SQLYog を使用)

Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...

JavaScriptは、マウスが通過したときにドロップダウンボックスを表示するように実装します。

この記事では、マウスがドロップダウンボックスの上を通過するときにドロップダウンボックスを表示するため...

vue3.0 のウォッチ リスナーの例の詳細な説明

目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...

親要素に対する CSS 子要素の配置の実装

解決親要素に position:relative を追加します。子要素に position:abso...

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

css n番目から始まるすべての要素を取得する

具体的なコードは次のとおりです。 <div id="ボックス"> &...

フロントエンドJSサンドボックスを実装するいくつかの方法についての簡単な説明

目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...