9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)
|
-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換えるには、次のコードを使用できます。 コードをコピー コードは次のとおりです。<h1>このテキストは置き換えられました</h1> <スタイル> h1 { 背景: url("myimage") 0 0 繰り返しなし; テキストインデント: -9999px; } </スタイル> 要素の背景が表示され、邪魔にならないようにテキストが画面外に移動されます。シンプルで効果的です。これはグラフィックキャプションを表示するためによく使用されます。Web フォントが存在するため、これが必要になることはほとんどありませんが、Web 上で使用する場合は依然として便利です。 今まで。 新しい技術が発見されました: コードをコピー コードは次のとおりです。{ テキストインデント: 100%; 空白: ラップなし; オーバーフロー: 非表示; } コードはテキストをコンテナーの幅を超えてインデントしますが、折り返されず、オーバーフロー部分は非表示になります。 これは少し長くて覚えにくいですが、ブラウザがバックグラウンドで 9999 ピクセルのボックスを描画しなくなるため、パフォーマンスが向上します。また、隠しテキストを使用することで、リンクの周囲に表示される奇妙な左に広がったアウトラインも防止されます。 |
<<: Jenkins統合Dockerプラグインの問題を解決するいくつかの方法
>>: JavaScriptはスタック構造の詳細なプロセスを実装する
推薦する
1つのSQL文でMySQLの重複排除が完了し、1つが保持されます。
数日前、ある要件に取り組んでいたとき、MySQL で重複レコードをクリーンアップする必要がありました...
jQueryのanimateアニメーションメソッドとアニメーションキューイング問題の解決方法の詳しい説明
目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...
win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)
私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...
nginx-ingress-controller ログ永続化ソリューションのソリューション
最近、nginx-ingress-controller のアプリケーションについて説明した公開アカウ...
HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法
実際のWeb開発では、画像の挿入やCSSファイルなどすべてパスが必要となります。ファイルパスを誤って...
Vue コンポーネントの構成構造とコンポーネント登録の詳細
目次1. コンポーネントの構成2. コンポーネント名2.1 コンポーネントの命名3. グローバル登録...
Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法
<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...
単一の MySQL テーブル内の行数が 500 万を超えてはいけないのはなぜですか?
今日は、興味深いトピックについてお話ししましょう。データベースとテーブルを分割することを検討する前に...
熟練デザイナーの7つの原則（1）：フォントデザイン
まあ、あなたはデザインの達人かもしれませんし、あるいはそれは大げさすぎるかもしれませんが、少なくとも...
MySQL の分離レベル、ロック、MVCC の紹介
この記事の目的は、これらの概念とその機能の関係を明らかにすることです。 Mysql がトランザクショ...
MySQLの一般クエリログとスロークエリログの分析
MySQL のログには、エラー ログ、バイナリ ログ、一般クエリ ログ、スロー クエリ ログなどが含...
SpringBoot アプリケーションの Docker デプロイメントの実装手順
目次序文DockerファイルDockerfile とは何ですか? Dockerfile 構文Spri...
時点に基づくMySQLクイックリカバリソリューション
なぜこのような記事を書いたかというと、数日前の夜、仕事が終わろうとしていたときに、業務側で突然、テー...
JavaScript でクールなマウス テーリング効果を実装
これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...
DockerでHadoopを実行しイメージを作成する方法
車輪の再発明として、ここでは再パッケージ化を使用して Docker ベースの Hadoop イメージ...