Html 将鼠标悬停在链接上时使图像显示在背景中_Html_Css_Hyperlink_Hover

Html 将鼠标悬停在链接上时使图像显示在背景中

html css hyperlink

Html 将鼠标悬停在链接上时使图像显示在背景中,html,css,hyperlink,hover,Html,Css,Hyperlink,Hover,基本上，我想做的是，当我把鼠标悬停在一个链接上时，使一个图像出现在链接后面这是到目前为止我的CSS： @charset "UTF-8"; #css-zen-garden { background-image: url(images/batswarm.jpg); background-repeat: no-repeat; background-color: #535353 } #container{ margin: 10%; background-color: silver; border:

基本上，我想做的是，当我把鼠标悬停在一个链接上时，使一个图像出现在链接后面

这是到目前为止我的CSS：

@charset "UTF-8";

#css-zen-garden {
background-image: url(images/batswarm.jpg);
background-repeat: no-repeat;
background-color: #535353
}

#container{
margin: 10%;
background-color: silver;
border: white solid 3px;
padding: 5px;
}

h1, h2, h3 {
text-transform: uppercase;
}

a {
color: white;
}

a:hover {
background-image: url(images/batman-logo.gif);
color: #535353;
}

header ~ div, article > div {
border-bottom: 3px dotted #535353
}

::selection {
background-color: red;
}

在a:悬停时，我希望该图像显示在链接的背景中，而不是在其下方。在此方面的任何帮助都将不胜感激。我的html代码也在底部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css Zen Garden: The Beauty in CSS Design</title>
<link rel="stylesheet" type="text/css" href="zenstyle.css" />

</head>
<body id="css-zen-garden">

<div id="container">
<div id="intro">
<!--  -->
<!-- - - - - - - - - -    HEADER  - - - - - - - - -   -->
<header>
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</span></h2>
</div>
</header>

<!-- - - - - - - - - -    QUICK SUMMARY   - - - - - - - - -   -->
<div id="quickSummary">
<article>
<p class="p1"><span>A demonstration of what can be accomplished visually through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</span></p>
<p class="p2"><span>Download the sample <a href="#" title="This page's source HTML code, not to be modified.">html file</a> and <a href="#" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
</article>
</div>

<!-- - - - - - - - - -    PREAMBLE  - - - - - - - - -   -->     
<div id="preamble">
<article>
<h3><span>The Road to Enlightenment</span></h3>
<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, and broken <abbr title="Cascading Style Sheets">CSS</abbr> support.</span></p>
<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr> and the major browser creators.</span></p>
<p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.</span></p>
</article>
</div>
</div>

<!-- - - - - - - - - -    SUPPORTING TEXT    - - - - - - - - -   -->
<div id="supportingText">
<article>
<div id="explanation">
<h3><span>So What is This About?</span></h3>
<p class="p1"><span>There is clearly a need for <abbr title="Cascading Style Sheets">CSS</abbr> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>
<p class="p2"><span><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>
</div>

<!-- - - - - - - - - -    PARTICIPATION    - - - - - - - - -   -->      
<div id="participation">
<h3><span>Participation</span></h3>
<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</span></p>
<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you&#8217;ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</span></p>
<p class="p3"><span>Download the sample <a href="#" title="This page's source HTML code, not to be modified.">html file</a> and <a href="#" title="This page's sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don&#8217;t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>
</div>

<!-- - - - - - - - - -    BENEFITS  - - - - - - - - -   -->                 
<div id="benefits">
<h3><span>Benefits</span></h3>
<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <abbr title="Cascading Style Sheets">CSS</abbr>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>
</div>

<!-- - - - - - - - - -    REQUIREMENTS  - - - - - - - - -   -->     
<div id="requirements">
<h3><span>Requirements</span></h3>
<p class="p1"><span>We would like to see as much <abbr title="Cascading Style Sheets, version 1">CSS1</abbr> as possible. <abbr title="Cascading Style Sheets, version 2">CSS2</abbr> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.</span></p>
<p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementations of <abbr title="Cascading Style Sheets">CSS</abbr>. Different browsers display differently, even completely valid <abbr title="Cascading Style Sheets">CSS</abbr> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn&#8217;t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won&#8217;t accept it.</span></p>
<p class="p3"><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.</span></p>
<p class="p4"><span>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</span></p>

</div>


</article>
</div>





</div>

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div>
<div id="extraDiv6"><span></span></div>

</body>
</html>


css禅园：css设计之美
禅宗花园
和的美
有关使用和本地处理副本的高级教程和提示。完成杰作后（请不要提交完成一半的作品），将.css文件上载到您控制的web服务器。如果我们选择使用它，我们将爬行相关的图像。最终提交将放在我们的服务器上
利益
为什么要参加？对于认可、灵感和资源，我们都可以在为page提供一些可用修复信息的案例时参考。完全符合浏览器要求有时仍然是一个白日梦，我们不希望您在每个平台上都能提供像素级的完美代码。但是尽可能多地进行测试。如果您的设计不符合’；至少在IE5+/Win和Mozilla（超过90%的人口运行）中不起作用，我们很有可能获胜；我不能接受
我们要求您提交原始艺术品。请尊重版权法。请尽量减少不良材料；有品味的裸体是可以接受的，完全的色情将被拒绝
这是一个学习练习，也是一个演示。您保留图形的全部版权（有限例外，请参阅），但我们要求您发布您的图形，以便其他人可以从您的作品中学习

我猜您尝试加载图像时不起作用。我尝试在代码中复制和粘贴，并尝试使用自己的图像，该代码运行良好：

a:hover {
background-image:url(batman-logo.gif);
color: #535353;
}

我这样做了（虽然使用了一张不叫蝙蝠侠logo.gif的图片），效果非常好。我猜您的图像路径有问题。

您的问题缺少太多细节，无法给出具体答案。基于你们的CSS，图像应该显示为元素背景的一部分，然而，有一个问题：（a）链接有多大？（b）链接中有什么内容？（c）链接是否显示为：块？（d）图像是否有填充、空白等，从而将其向下推？链接很小，只有两个单词，表示“html链接”。此链接下载一个示例html页面。否链接不显示：block；。链接周围没有其他内容。如果你需要html，我可以把它放上去。另外，我的图片相当大，所以我可能必须编辑它，使其足够小，以适应微小的链接空间。你可以发布其余的代码吗？我正在尝试将所有链接的batman-logo.gif背景图像放在html中。悬停时颜色会变吗？谢谢你的帮助。如果不是，可能是图像太大，在这种情况下，请尝试以下操作：