どのようにホームページの中のハイパーリンクに背景のピクチャーをプラスします
1614 ワード
一、まずハイパーリンクaをブロックレベルにするには、次のようにします.
aにcssコードを追加する:a{display:block;}
二、backgroung-imageを使用してaリンクに背景画像を加え、使い方は以下の通りである.
a{ background-image:url(xxx.jpg);}
三、実例はハイパーリンクに背景画像を加えてプレゼンテーションし、コードは以下の通りである.
本例で用いる画像はa.jpg,a 1である.jpgはすべてホームページファイルと同じフォルダにあります.
aにcssコードを追加する:a{display:block;}
二、backgroung-imageを使用してaリンクに背景画像を加え、使い方は以下の通りである.
a{ background-image:url(xxx.jpg);}
三、実例はハイパーリンクに背景画像を加えてプレゼンテーションし、コードは以下の通りである.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style rel="stylesheet" type="text/css">
a{
display:block;// background-image:url(a.jpg);// background-size:cover; width:375px; height:240px; text-decoration:none;// text-align:center; } a:hover{ background-image:url(a1.jpg); width:375px; height:240px; text-decoratio:underline; display:block; } #main{width:300px; height:300px; margin:0 auto;} </style> </head> <body> <a href="#"> </a> <div id="main"><a href="#"></a></div><!-- --> </div> </body> </html>本例で用いる画像はa.jpg,a 1である.jpgはすべてホームページファイルと同じフォルダにあります.