9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)
|
-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換えるには、次のコードを使用できます。 コードをコピー コードは次のとおりです。<h1>このテキストは置き換えられました</h1> <スタイル> h1 { 背景: url("myimage") 0 0 繰り返しなし; テキストインデント: -9999px; } </スタイル> 要素の背景が表示され、邪魔にならないようにテキストが画面外に移動されます。シンプルで効果的です。これはグラフィックキャプションを表示するためによく使用されます。Web フォントが存在するため、これが必要になることはほとんどありませんが、Web 上で使用する場合は依然として便利です。 今まで。 新しい技術が発見されました: コードをコピー コードは次のとおりです。{ テキストインデント: 100%; 空白: ラップなし; オーバーフロー: 非表示; } コードはテキストをコンテナーの幅を超えてインデントしますが、折り返されず、オーバーフロー部分は非表示になります。 これは少し長くて覚えにくいですが、ブラウザがバックグラウンドで 9999 ピクセルのボックスを描画しなくなるため、パフォーマンスが向上します。また、隠しテキストを使用することで、リンクの周囲に表示される奇妙な左に広がったアウトラインも防止されます。 |
<<: Jenkins統合Dockerプラグインの問題を解決するいくつかの方法
>>: JavaScriptはスタック構造の詳細なプロセスを実装する
推薦する
HTML5 と HTML4 の 10 の主な違い
HTML5 は HTML 標準の次のバージョンです。ますます多くのプログラマーが、Web サイトの構...
データページング効果を実現する js オブジェクト
この記事の例では、データのページング効果を実現するためのjsオブジェクトの具体的なコードを参考までに...
MySQL開発標準と使用スキルの概要
1. 命名規則1. データベース名、テーブル名、フィールド名には小文字を使用し、アンダースコアで区切...
WeChatアプレットでSVGアイコンを使用する方法
SVG は、さまざまな利点があるため、近年広く使用されています。残念ながら、WeChat ミニプログ...
MySQL マスタースレーブの原理と構成の詳細
MySQLのマスタースレーブ構成と原理、参考までに具体的な内容は以下のとおりです。 1. 環境の選択...
React antd タブの切り替えによりサブコンポーネントが繰り返し更新される
説明する： Tabs コンポーネントが切り替わると、TabPane に含まれる同じサブコンポーネント...
React双方向データバインディングの原理についての簡単な説明
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
Webデザインチュートリアル（6）：デザインへの情熱を持ち続ける
<br />前の記事：Webデザインチュートリアル（5）：Webビジュアルデザイン。 1...
MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)
1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...
Vueのイベント処理とイベント修飾子の詳細な説明
<div id="ルート"> <h2>頑張れ、{{na...
MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析
1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...
MySQL btree インデックスとハッシュ インデックスの違い
MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...
MySQL レプリケーション テーブルの詳細とサンプル コード
MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...
HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明
まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...
JavaScript が Xiaomi のカルーセル効果を模倣
この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...