링크 위로 마우스를 가져 가면 이미지가 배경으로 표시됩니다.

기본적으로 내가 마우스로 가리키면 링크 뒤에 이미지가 표시됩니다. 내 A의링크 위로 마우스를 가져 가면 이미지가 배경으로 표시됩니다.

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

이 지금까지 내 CSS입니다 가져가, 그 이미지가 없습니다 아래에 링크의 배경에 표시 할. 이것에 대한 도움은 매우 감사 할 것입니다. 내 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>

출처

2013-12-12 shoeman23

특정 답변을 제공하기 위해 질문에서 누락 된 세부 정보가 너무 많습니다. CSS를 기반으로 이미지 *는 요소의 배경으로 표시되어야하지만 질문이 있습니다. (a) 링크가 얼마나 큽니까? (b) 링크의 내용은 무엇입니까? (c) 링크가 표시되고 있습니까? (d) 이미지에 패딩 (padding), 공백 (white space)이있어 이미지가 아래로 밀리는가? –

링크는 작지만 "html 링크"라고하는 두 단어입니다. 이 링크는 샘플 HTML 페이지를 다운로드합니다. 링크가 표시되지 않습니다 : 차단; 링크를 둘러싸고있는 것은 없습니다. html이 필요한 경우이를 넣을 수 있습니다. 또한 내 그림이 꽤 크기 때문에 편집하고 작은 링크 공간에 맞게 충분히 작게 만들어야 할 것입니다. – shoeman23

나머지 코드도 게시 할 수 있습니까? – dunnmifflsys

이미지를로드하려고합니다. 작동하지 않습니다. 내가 복사하고 코드를 붙여 내 자신의 이미지를 사용하려고했는데,이 코드는 잘 작동 :

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

나는이 한 (배트맨-logo.gif라는 아닌 이미지와 함께,하지만) 그것은 절대적 일 벌금. 이미지로가는 길에 뭔가 잘못되었다고 생각합니다.

출처

2013-12-12 03:08:36 dunnmifflsys

도와 주셔서 감사합니다. – shoeman23

작동이 끝났습니까? – dunnmifflsys

그렇지 않은 경우 이미지가 너무 클 수 있습니다.이 경우 다음을 시도하십시오. http://seeclickfix.com/files/user_images/0000/1525/Batman_logo_small_square.jpg – dunnmifflsys

링크 위로 마우스를 가져 가면 이미지가 배경으로 표시됩니다.

답변

관련 문제