背景图像周围的代码:
代码:
<body class="<?php echo OsBrowser::getCssClass(); ?>">
<div id="back">
<a title="Crystal Saga" href="http://cs.r2games.com"></a>
</div>
<!-- Top -->
<a name="top" id="top"></a>
<div class="topbg"></div>
<!-- Wrapper // -->
<div class="wrapper">
<!-- Header // -->
<div class="header">
此代码用于创建背景图像:
代码:
<div id="back">
<a title="Crystal Saga" href="http://cs.r2games.com"></a>
</div>
这是我的 CSS:
代码:
#back {
height: 900px;
position: absolute;
text-indent: -9999px;
width: 100%;
z-index: 0;
}
#back a:link {
background: url('img/gameinfo_bg.jpg') scroll center top;
display: block;
height: 100%;
width: 100%;
}
现在，我的问题是如何制作它，使其像 MMORPG.com 上的背景图像一样，其中背景图像的顶部部分是可点击的？
更新:
我解决了这个问题。基本上，我必须稍微修改一下代码。我的网站使用的主题使用一个 header 类，该 header 类基本上将内容区域推到主菜单和子菜单下方。即使我正确完成了代码，标题区域类也会阻止背景图像的顶部区域不可点击。所以我要做的就是从 div 中删除代码，这样只有 div 存在，并且背景图像会显示但没有链接，然后我复制了 div 和代码并将其粘贴到标题类代码的正下方。我不太确定它为什么起作用，但是通过将 div 和代码放在标题类代码下方，标题区域不再主导链接，这使得顶部区域可点击。将 div 代码留在代码附近可以显示整个背景图像，但我必须将代码移到 header 类下方，以便图像中的区域本身可以工作。
代码:
<body class="<?php echo OsBrowser::getCssClass(); ?>">
<div id="back">
<!--<a title="Crystal Saga" href="http://cs.r2games.com"></a>-->
</div>
<!-- Top -->
<a name="top" id="top"></a>
<div class="topbg"></div>
<!-- Wrapper // -->
<div class="wrapper">
<!-- Header // -->
<div class="header">
<div id="back2">
<a title="Crystal Saga" href="http://cs.r2games.com"></a>
</div>
代码:
#back {
background: url('img/gameinfo_bg.jpg') scroll center top;
height: 900px;
position: absolute;
text-indent: -9999px;
width: 100%;
z-index: 0;
}
#back a:link {
/*background: url('img/gameinfo_bg.jpg') scroll center top;*/
display: block;
height: 160%;
width: 100%;
}
#back2 {
}
#back2 a:link {
/*background: url('img/gameinfo_bg.jpg') scroll center top;*/
display: block;
height: 160px;
width: 100%;
}
最佳答案
如果我按照你想要的方式解决你的问题...你可以看到 fiddle 来了解这个概念。
fiddle :http://jsfiddle.net/tHuqV/
演示:http://jsfiddle.net/tHuqV/embedded/result/
注意:在 fiddle 中我给出了 width:100% ；在标签上，但我们可以根据需要使其固定大小，并通过给 css - margin: 0 auto; 设置位置中心；
关于html - 背景图像的顶部区域可点击吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9695622/