画像を使用してハイパーリンクのパーソナライズされた下線を実現します

画像を使用してハイパーリンクのパーソナライズされた下線を実現します
画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるのです。
実際の効果はこちらをご覧ください http://5key.net/demo/hyperlink-underline
アップロード/200710/29_094308_1.gif
まず、この色付きの下線を取得する方法について説明します。おそらくご想像のとおり、グラデーションの背景画像です。それは正しい!下の写真です。
アップロード/200710/29_100223_2.gif
下の CSS を見てください。リンク全体の変更による効果が理解できたと思います。
あまり明確でない場合は。まず、引き戸本体の概念を理解しましょう。
フォントサイズ:14px;
フォントファミリー: Helvetica、サンセリフ;
パディング:10px;
マージン:0px;
}
h1{マージン:0; パディング:0; フォントサイズ:16px; }
p{パディング:20px 0 0 0;}
{
*パディング下部:1px;
テキスト装飾:なし;
}
リンク
カラー:#06F;
背景: url(1.gif);
背景繰り返し: 繰り返しx;
背景位置: 0 16px;
}
a:訪問{
色:#06f;
背景画像: url(1.gif);
背景繰り返し: 繰り返しx;
背景位置: 0 16px;
}
ホバー{
色:#039;
背景:url(1.gif) repeat-x 0 下;
}

<<:  シェルを使用して複数のサーバーでバッチ操作を実行する方法

>>:  IE6 フォントを定義できません: 13px サイズは無効です。IE6 は自動的に大きいフォント ソリューションを表示します。

推薦する

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

React で遅延読み込みを使用して最初の画面の読み込み時間を短縮する方法

目次使用インストールルーティングでどのように使用しますか?読み込み速度の比較最近、中間およびバックエ...

Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

/******************** * キャラクターデバイスドライバー**********...

Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。画像拡大...

arcgis.js は、マップ本体の表示範囲を制御し、領域を超えた場合に自動的にバウンスするようにします (実装のアイデア)

目次背景効果アイデア背景少し前に、会社のプロジェクトで問題が発生しました。地図のベースマップ領域の範...

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...

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

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

Linux で SSH 経由でリモート ファイルシステムをマウントする方法の詳細な説明

SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...

MySQL 5.7 で業務を停止せずに従来のレプリケーションを GTID レプリケーションに変更する例

GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...

MySQL 5.7.21 のインストールと設定のチュートリアル

mysql5.7.21の簡単なインストール構成は次のとおりです。 1. MySQLのインストール1....

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...

CSS3 のディスプレイのグリッドレイアウトとフレックスレイアウトの詳細な説明

Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を...

CSS レスポンシブ レイアウト システムの例コード

レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...