css背景图片里如何加点击超链接 30
.index-news{background:url(../images/v_line2.gif)
如何在这个图片上加入点击链接到另一个网址呢?
再比如说有个样式.index-news h2{background-position:0px -34px}
如何再用户点到此样式的时候链接到另一个网址呢? 展开
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:block; width:300px; height:100px; font-size:25px;}
</style>
</head>
<body>
<a>我是带背景图片的超链接</a>
</body>
</html>
6、运行效果截图如下。
2024-07-20 广告
推荐于2017-11-29
.a{background:url(../images/v_line2.gif) 0 0 no-repeat;width:100px;height:30px;display: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>
有这个样式
那说明有<h2>xxxxxx</h2>
加超级链接的话
加个a去包住它
<a href="链接地址"><h2>xxxxxx</h2></a>但是这样会整个h2随便点一个都会超级链接
解决方法的话
看你还要用background position的
就是那个图片是没有文字在上面覆盖的
那直接在class="index-news"
里面价格<img src="../images/v_line2.gif">
在设定img的位置就好了
再<a href="链接地址"><img src="../images/v_line2.gif"></a>
这个图片就可以直接去超链接了
2017-06-15 · 做品质教育,用事实说话
把背景写死在CSS里无法实现超链接。
方法一:必须用JS或者JQ来实现寻找DOM对象的方式来进行连接的跳转。
方法二:把背景从CSS中移除,放到HTML的img标签里,为img标签添加超链接。
.index-news a{margin:0px;padding:0px;background:url(../images/v_line2.gif) no-repeat;display:block;cursor:hand;}
.index-news a:hover{background:url(../images/v_line2.gif) no-repeat;}
<div class="index-news"><a href="链接地址" target="_blank"></a></div>
第二个问题:H2是文字样式,直接在文字上加链接不就行了