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}
如何再用户点到此样式的时候链接到另一个网址呢?
展开
 我来答
gangtie77
高粉答主

2018-04-05 · 说的都是干货,快来关注
知道大有可为答主
回答量:139
采纳率:100%
帮助的人:2.6万
展开全部

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 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT... 点击进入详情页
本回答由博思aippt提供
匿名用户
推荐于2017-11-29
展开全部
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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
ejinn9394
2017-06-15 · 超过15用户采纳过TA的回答
知道答主
回答量:54
采纳率:0%
帮助的人:28.7万
展开全部
.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>
这个图片就可以直接去超链接了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
哈尔滨市南岗区爱尚职
2017-06-15 · 做品质教育,用事实说话
哈尔滨市南岗区爱尚职
爱尚实训成立于2010年,总部设立在软件外包名城—大连,并在哈尔滨和沈阳设有分校。爱尚实训专注于IT行业精英的培养,打造高端IT技能实训品牌。
向TA提问
展开全部
  1. 把背景写死在CSS里无法实现超链接。

  2. 方法一:必须用JS或者JQ来实现寻找DOM对象的方式来进行连接的跳转。

  3. 方法二:把背景从CSS中移除,放到HTML的img标签里,为img标签添加超链接。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
royulee
2017-06-15 · 如果相遇了,我只能说:你也在这里!
royulee
采纳数:37 获赞数:58

向TA提问 私信TA
展开全部
第一个问题:实现这样的效果只需要直接在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是文字样式,直接在文字上加链接不就行了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(20)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式