css背景图片里如何加点击超链接 30
比如有这么一个css.index-news{background:url(../images/v_line2.gif)如何在这个图片上加入点击链接到另一个网址呢？再比如说...
比如有这么一个css
.index-news{background:url(../images/v_line2.gif)
如何在这个图片上加入点击链接到另一个网址呢？
再比如说有个样式.index-news h2{background-position:0px -34px}
如何再用户点到此样式的时候链接到另一个网址呢? 展开
.index-news{background:url(../images/v_line2.gif)
如何在这个图片上加入点击链接到另一个网址呢？
再比如说有个样式.index-news h2{background-position:0px -34px}
如何再用户点到此样式的时候链接到另一个网址呢? 展开
22个回答
展开全部
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、运行效果截图如下。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼word文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景...
点击进入详情页
本回答由博思aippt提供
展开全部
css是无法加超链接的，但是你可以在一个A标签下设置背景图片啊。
.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>
.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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.index-news h2{background-position:0px -34px}
有这个样式
那说明有<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>
这个图片就可以直接去超链接了
有这个样式
那说明有<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>
这个图片就可以直接去超链接了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把背景写死在CSS里无法实现超链接。
方法一：必须用JS或者JQ来实现寻找DOM对象的方式来进行连接的跳转。
方法二：把背景从CSS中移除，放到HTML的img标签里，为img标签添加超链接。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
第一个问题：实现这样的效果只需要直接在div中加上一个空的超链接，然后通过CSS来控制，CSS设置的关键是要加上display:block;和cursor:hand（鼠标手形）;
.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是文字样式，直接在文字上加链接不就行了
.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是文字样式，直接在文字上加链接不就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（20）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
