Question

围绕背景图片的代码：

代码：

<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上的背景图像一样，背景图像的顶部可以点击？

更新：

我解决了这个问题。基本上，我不得不改变代码。我为我的网站使用的主题使用了一个头类，它基本上推动了主要和子菜单下面的内容区域。标题区域类阻止了背景图像的顶部区域不可点击，即使我已正确完成代码。所以我要做的就是从div中删除代码，以便只有div存在，背景图像会显示但没有链接，然后我复制div和代码并将其粘贴在标题类代码的正下方。我不确定它为什么会起作用，但是通过将div和代码放在标题类代码下面，标题区域不再支配链接，这使得顶部区域可以点击。将div代码放在代码附近允许显示整个背景图像，但我必须将代码移动到标题类下面，以便图像中的区域本身可以工作。

代码：

<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%;
}

Answer 1

如果我的问题正确解决了你想要的问题......你可以看到小提琴来获得这个概念。

小提琴：http://jsfiddle.net/tHuqV/

演示：http://jsfiddle.net/tHuqV/embedded/result/

注意：在小提琴中，我给出了宽度：100％;在标签上，但我们可以根据需要设置固定大小，并通过给出css-margin：0 auto设置位置中心;

Answer 2

为标签编写onclick方法：

<div id="back">
    <a title="Crystal Saga" href="http://cs.r2games.com" onclick="doThis()"></a>
</div>

这就是mmorpg.com网站上的内容。

可点击的背景图片的顶部区域？

2 个答案: