css背景图片里如何加点击超链接
发布网友
共15个回答
热心网友
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、运行效果截图如下。
热心网友
$('.index-news').on('click',function(){
window.location.href = "xxxxx";
});
$('.index-news h2').on('click',function(){
window.location.href = "xxxxx";
})
需引入jquery，当然也可以写个a标签放在你需要的地方利用浮动等等，点击时候也可以跳转
热心网友
.index-news h2{background-position:0px -34px}
比如你的代码是这样：
<div class="index-news"><h2><a href="链接地址">这是新闻标题</a></h2></div>
这样就行了，链接是HTML代码跟CSS代码是没有什么关系的CSS可以定义HTML的样式而已。。
热心网友
两种思路
1. 用js 给容器加单击事件
<div class="index-news" onclick="location='http:\\www.xxx.com'">2.用a标签包裹 或者直接用a标签
热心网友
//假如有jquery
$(".index-news").click(function(){
location.href = "http://www.baidu.com";
});
//原生js写法如下
function getByClass(oParent,sClass){
var arr = [];
var aEle = oParent.getElementsByTagName('*');
var re = new RegExp('\\b'+sClass+'\\b');
for(var i=0;i<aEle.length;i++){
if( re.test(aEle[i].className) ){
arr.push( aEle[i] );
}
}
return arr;
}
window.onload =function(){
var indexnews = getByClass(document,"index-news");
for(var i=0; i<indexnews.length; i++){
indexnews[i].onclick = function(){
window.location.href = "http://www.baidu.com";
}
}
}
（代码已测试，纯手打，求采纳 梦魂清风 @author：dream breeze）！
热心网友
使用a标签或者在js中设置，如：
<!DOCTYPE html><html>
<head>
<title>css1.html</title>
<style>
.index-news {
display: inline-block;
width: 500px;
height: 500px;
background: url(../images/v_line2.gif) no-repeat;
}
</style>
</head>
<body>
<a class="index-news" href="http://www.baidu.com"></a>
</body>
</html>
js设置：
<html>
<head>
<title>css1.html</title>
<style>
#index-news {
display: inline-block;
width: 500px;
height: 500px;
background: url(../images/v_line2.gif) no-repeat;
cursor: pointer;
}
</style>
<script>
window.onload = function () {
var item = document.getElementById("index-news");
item.onclick = function () {
window.location.href="http://www.hao123.com";
}
}
</script>
</head>
<body>
<div id="index-news"></div>
</body>
</html>
热心网友
把背景写死在CSS里无法实现超链接。
方法一：必须用JS或者JQ来实现寻找DOM对象的方式来进行连接的跳转。
方法二：把背景从CSS中移除，放到HTML的img标签里，为img标签添加超链接。
热心网友
我想到有两个办法，第一个是在HTML文件中，给想要被点击的元素外层添加一个a标签包裹起来，设置a标签为块元素，利用a标签的href属性实现点击跳转；第二个就是利用js的点击事件了，监听元素的点击事件，点击之后，利用window.location="跳转的地址"，这样也可以。
热心网友
给.index-news对相应的元素外面套一个<a href="跳转地址"></a>就可以了
热心网友
<a href="链接的地址"><img src="图片的URL" width="图片的宽度" height="图片的高度" border="边框"></a>这样做不是更好， 为啥用css
热心网友
需要在盒子里面添加a标签。
但是因为a标签是行内元素，所以需要加上display：block；使其撑满盒子。
例如：index-news a{display:block;}
另外一个同理。
热心网友
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>
热心网友
写div覆盖上去写a链接， 直接给背景图片是加不上的，链接两个网址写两个div加两个不同的连接就可以
热心网友
.a1:hover{ font-size:14px; height: 54px; width: 97px; background-image:url(1.jpg);display:block;} 因为a不是块级元素，要把a设置为块级元素，然后加背景，设置宽，高
热心网友
在.index_news里加一个A标签，.index_news相对定位,A绝对定位就可以
