如何给网页里的超链接加背景图片

一、首先要把超链接a块级话，方法如下：

     给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、a1.jpg都和网页文件在同一个文件夹里。

   

  

posted @ 2015-11-16 20:35  心雨星空  阅读(185)  评论(0)  编辑  收藏  举报