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

画像を使用してハイパーリンクのパーソナライズされた下線を実現します
画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるのです。
実際の効果はこちらをご覧ください 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でCSSスタイルを動的に変更する2つの方法の詳細な説明

最初の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするクラスを動的に追加します...

TypeScript インターフェース定義ケースチュートリアル

インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...

MySQL エンコーディング utf8 および utf8mb4 utf8mb4_unicode_ci および utf8mb4_general_ci

参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...

MySQL のソートとページング (order by と limit) と既存の落とし穴

並べ替えクエリ (order by)電子商取引の場合: 今日完了したすべての注文を表示し、取引金額に...

Nginx リバースプロキシの例の詳細な説明

1. リバースプロキシの例1 1. 効果を達成する(1)ブラウザを開き、www.123.comと入力...

nginx ip ブラックリストの動的禁止の例

ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...

Dockerfile における ENV 命令の具体的な使用法の詳細な説明

1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...

MySQL で最大接続数を正しく変更する 3 つの方法

MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...

Docker コンテナで DockerFile を使用して複数の Tomcat サービスをデプロイする手順

1. [admin@JD ~]$ cd opt #ルートディレクトリにoptと入力2. [admin...

HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...

CSS で波の効果を作成するためのアイデア

以前、純粋な CSS を使用して波の効果を実現する方法をいくつか紹介しました。それらについては、次の...

VirtualBox CentOS7.7.1908 Python3.8 ビルド Scrapy 開発環境 [グラフィックチュートリアル]

目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...

Mysql Explainコマンドの使用と分析

mysql explain コマンドは、MySQL がインデックスを使用して選択ステートメントを処理...