Question

我现在一直在努力研究这个代码，即使一切正常，它仍然无法正常工作。任何帮助都会很棒！

仅供参考：如果您知道我的意思，我正试图将悬停图片放在一个透明的上面！

完整代码：

<br><div class="display1">
    <div class="display2">
        <div style="position:absolute; top:0px; background-image:url(http://www.unwritten-quotes.com/images/bgg.gif);background-repeat:repeat; background-color:transparent;" class="display3"></div>
        <div style="position:absolute; top:0px;"><a href="#" title="Testing" class="displayhover"><img src="http://www.unwritten-quotes.com/images/border.png" border="0"></a></div>
        <div class="displayquote">Testing</div>
    </div>
</div>
<div class="display1">
    <div class="display2">
        <div style="position:absolute; top:0px; background-image:url(http://www.unwritten-quotes.com/images/bgg.gif);background-repeat:repeat; background-color:transparent;" class="display3"></div>
        <div style="position:absolute; top:0px;"><a href="#" title="Testing" class="displayhover">

JSFiddle：http://jsfiddle.net/za6n3/

Answer 1

我注意到在你的背景图片中，链接周围没有引号。我不确定这是否是问题，但如果我将您的代码复制到http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_norepeat并将链接放入您的图片中，则可以正常使用。

Answer 2

将背景图像和叠加图像放在同一个div中

<div style="position:absolute; top:0px; 
    background:url(http://www.unwritten-quotes.com/images/bgg.gif)">
    <a href="http://adobe.com">
        <img src="http://www.unwritten-quotes.com/images/border.png" border="0">
    </a>
</div>

修改：更新代码以添加<a>代码

Answer 3

Hello Travis首先让我们修复你的代码。

这是我修复你的代码，这是第一个文件index.php，这个文件将包含你的所有HTML代码，没有你的CSS。

的index.php

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body id="body">
    <div id="body-container">
        <div id="display-1">
            <a class="display-2-btn" href="/">
                <img class="display-border" src="http://www.unwritten-quotes.com/images/border.png" width="" height="" alt="Testing" border="0" >
            </a>
        </div>
    </div>
</body>
</html>

你可以告诉我们修改你的代码以便它能正常运行，你可以看到的第一件事是不同的是正确的HTML结构，

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

我们为了简单的目的添加了这个，任何和所有HTML文档都应该有这个，不包含其默认结构的HTML文档通常不能正常工作，接下来我们添加这部分代码，

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>
    <link rel="stylesheet" href="style.css" />
</head>

我们正在查看元标记，标题标记和链接标记，我们有meta标记属性http-equiv和http-equiv里面的内容类型和内容语言这将告诉你的网络服务器告诉浏览器你正在使用这种内容类型的代码格式，这是内容语言的默认语言， next是标题标签，告诉浏览器将其作为页面的标题，例如每个标签内的小标题，接下来是链接标签，它将我们的CSS文件链接到我们的主网页，当编码HTML或CSS时，将HTML放在一个文件中并将CSS放在自己的文件中总是合适的，它不是将它们放在一起是不合适的，但是制作外部样式表是更好的做法，如果绝对必要，只使用内联CSS，接下来我们将添加到我们的html文档的主体

<body id="body">
    <div id="body-container">
        <div id="display-1">
            <a class="display-2-btn" href="/">
                <img class="display-border" src="http://www.unwritten-quotes.com/images/border.png" width="" height="" alt="Testing" border="0" >
            </a>
        </div>
    </div>
</body>

这是我们开始添加您在Web浏览器中看到的元素，在HTML语言中，输出到屏幕的唯一内容是在正文中，但是在头部添加了外部工作表或脚本，脚本可以是在头部或正文中，但文件的任何外部链接都需要在文档的头部，

<div id="display-1">
    <a class="display-2-btn" href="/">
        <img class="display-border" src="http://www.unwritten-quotes.com/images/border.png" width="" height="" alt="Testing" border="0" >
    </a>
</div>

你在身体中看到的第一件事就是只有display-1不再有2个显示类，而且它不再是一个类而是一个id，我们也把我们的img标签放在a之间标签，接下来我们添加我们的css文件（自述文件：下面的代码是它自己的文件没有存储在index.php中）

的style.css

html{

}
body{
    background-color:#707070;
}
#body{

}   
#body-conainer{

}
#display-1{
    background-image:url('http://www.unwritten-quotes.com/images/bgg.gif');
    background-repeat:no-repeat;
    width:115px;
    height:139px;
    border-radius:20px;
}
.display-border{
    border-radius:20px;
}

我们添加到此代码的第一件事是主要结构，例如你在上面看到的，接下来我们添加这段代码来改变背景颜色

body{
    background-color:#707070;
}

这使得背景颜色变为灰色，接下来我们添加背景图像，

#display-1{
    background-image:url('http://www.unwritten-quotes.com/images/bgg.gif');
    background-repeat:no-repeat;
    width:115px;
    height:139px;
    border-radius:20px;
}

这会添加背景图像并修剪图像以适应边框，接下来我们修剪HTML代码中添加的边框

<img class="display-border" src="http://www.unwritten-quotes.com/images/border.png" width="" height="" alt="Testing" border="0" >

我们使用此代码修剪边框，

.display-border{
    border-radius:20px;
}

并且你有一个我认为你想要的完整工作副本，现在让我，如果这是你想要的或不是你想要的，我还强烈建议你先学习一下HTML和CSS语法直接潜水，

这是一个以html和css开头的好地方：

http://www.w3schools.com/

这是一个从php开始的好地方：

http://www.php.net/manual/en/

我希望这能帮到你（=

超链接图片不能正常工作

3 个答案: