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

画像を使用してハイパーリンクのパーソナライズされた下線を実現します
画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるのです。
実際の効果はこちらをご覧ください 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 は自動的に大きいフォント ソリューションを表示します。

推薦する

Linux での MySQL 8.0 インストール チュートリアル

この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...

HTML5+CSS3コーディング標準

黄金律プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたよ...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

mycat を使用して MySQL データベースの読み取りと書き込みの分離を実装する例

MyCATとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベースク...

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

Docker基盤技術の適用に関する詳細な説明 名前空間Cgroup

Docker の基盤技術: Docker の基盤となる 2 つのコア テクノロジーは、名前空間とコ...

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

CSS3 の display:grid、グリッドレイアウトの紹介

1. グリッドレイアウト（グリッド）: Web ページをグリッドに分割し、さまざまなグリッドを組み合...

Nginx 構成 SSL および WSS 手順の紹介

目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...

MySQL でのインデックスの追加と削除に関連する操作

目次1. インデックスの役割2. インデックスの作成と削除（1）ALTER TABLE文を使用して、...

VMWare仮想マシンのcentosの時間が現地時間と矛盾する問題を解決する

VM Ware 仮想マシン CentOS の時刻は、次の図に示すように、現地時間と一致しません。おそ...

Centos7 での DNS サーバーの構築の概要

目次1. プロジェクト環境: 2: DNSサーバーの設定i: 前方解析を構成する: ii: 逆解像度...

JavaScriptは双方向リンクリストプロセス分析を実装します

目次1. 二重連結リストとは何か2. 双方向リンクリストのカプセル化3. 双方向リンクリストの一般的...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...