css背景图片里如何加入点击超链接？

html-css01732

css背景图片里如何加入点击超链接？,第1张

css是无法加超链接的，但是可以在一个A标签下设置背景图片加入超链接，具体步骤如下。

1、新建test.html文件。

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

给a添加css代码 : a{ display:block}

代码截图如下：

3、使用backgroung-image为a链接加背景图片，用法如下：

a{ background-image:url(xxx.jpg)}

不过仅仅这样写还不能显示出背景图片，需要和第二步结合才行。

代码截图如下：

4、用到的图片素材如下，图片名字为001.jpg，位置截图如下。

5、实例演示给超链接加背景图片，代码如下：

<html>

<head>

<style>

a{background-image:url(001.jpg)display:blockwidth:300pxheight:100pxfont-size:25px}

</style>

</head>

<body>

<a>我是带背景图片的超链接</a>

</body>

</html>

6、运行效果截图如下。

css是无法加超链接的，但是你可以在一个A标签下设置背景图片啊。

.a{background:url(../images/v_line2.gif)

0

0

no-repeatwidth:100pxheight:30pxdisplay:block}

............

<a

href="xxx.html"

class="a"></a>

这样就OK了但是一定要注意设置display属性为block

或者inline-block才能有点击区域，不然<a></a>之间就要插入一张透明图片设置宽高如<a

href="xxx.html"

class="a"><img

src="透明图片地址"

width="100"

height="30"></a>