이미지를 탐색 표시 줄에 표시하려면 어떻게해야합니까?

내 탐색 바의 배경을 보여줄 이미지를 얻으려고하고 있는데,이 사이트와 다른 곳에서 몇 가지 코드 샘플과 예제를 보았습니다. 그러나 실수를 저지르는 행운이 거의 없습니다.이미지를 탐색 표시 줄에 표시하려면 어떻게해야합니까?

이 마크 업입니다 :

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="icon" type="img/png" href="Johns Cars Shadow.ico" /> 
<link href="styles.css" rel="stylesheet" type="text/css"> 
<title>Johns Cars</title> 
<style type="text/css"> 

#main { 
    box-shadow: 0px 10px 10px 15px #888888; 
} 

</style> 
</head> 

<body bgcolor="#ffffff" marginwidth="95" link="#FFFFFF"> 
<table id="main" bgcolor="#ffffff" width="1200" align="center"> 
    <tr> 
    <td> 
    <div id="container" align="center" width="1200"> 
     <div id="logo"> 
      <table align="center" width="345" height="167"> 
       <tr> 
       <td> 
        <div> 
        <img src="Johns cars Shadow.png" width="341" height="167"/> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="navbar"> 
     <ul class="cssmenu"> 
      <li id="active"><a href="home.html"><span>Home</span></a></li> 
      <li><a href="#"><span>Products</span></a></li> 
      <li><a href="#"><span>About</span></a></li> 
      <li id="last"><a href="#"><span>Contact</span></a></li> 
     </ul> 
    </div> 
</div> 
</td> 
</tr> 
</table> 

</body> 
</html>

그리고 이것은 CSS입니다 :

이

ul.cssmenu { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    width: auto; 
    position: relative; 
    display: block; 
    height: 30px; 
    font-size: 12px; 
    font-weight: bold; 
    background-image: transparent url(../images/nav.png) repeat-x top left; 
    font-family: Arial, Helvetica, sans-serif; 
    border-bottom: 1px solid #000000; 
    border-top: 1px solid #000000; 
} 
ul.cssmenu li { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
ul.cssmenu li a { 
display: block; 
float: left; 
color: #999999; 
text-decoration: none; 
font-weight: bold; 
padding: 8px 20px 0 20px; 
} 
ul.cssmenu li a:hover { 
color: #4d4d4d; 
height: 22px; 
background-image: transparent url(../images/nav.png) 0px -30px no-repeat; 
} 
ul.cssmenu li:active a { 
display: inline; 
height: 22px; 
background-image: transparent url(../images/nav.png) 0px -30px no-repeat; 
float: left; 
margin: 0; 
}

이 어떤 도움을 환영 할 것입니다!

출처

2013-09-30 Bmize729

왜 DTD가 ''으로 싸여 있습니까? – Dai

'../ images/nav.png'을'images/nav.png'로 한 번 변경합니다. '../'는 스타일 시트가있는 곳의 상위 디렉토리로 올라가는 것을 의미합니다. 소스 코드를 보면, style.css가 루트 디렉토리에 있으므로'images' 폴더도 루트에 있다고 생각합니다. 또한 이미지 URL 이상을 지정하는 경우'background-image' 대신'background'를 사용하려고합니다. 또한 페이지 레이아웃을 위해 표를 사용하지 마십시오. 태그 속성을 사용하여 색상, 여백, 너비 및 텍스트 정렬을 설정하지 마십시오. 이것은 CSS가있는 것입니다. – 3dgoo

피들 만들기 .. – Sasidharan

재산 background-image를 사용하여, 당신은 또한 색상/bgposition/bgrepeat를 제공 할 수 없습니다 - 그것이에만 URL을 기대하고이 경우에는 이미지이므로 여기의 값은 유효하지 않은 것으로 간주되어 무시됩니다. background은 여러 속성을 설정할 수있는 유효한 속기 속성입니다.

background: transparent url(../images/nav.png) repeat-x top left;

출처

2013-09-30 04:14:23 RwwL

속기에 감사드립니다. 디렉토리도 잘못되었습니다. – Bmize729

HTML :

<ul> 
    <li><a href="#">Home</a></li> 
    <li class="active"><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>

CSS :

.active { 
     background:#ccc url(path/to/image/marker.png) center bottom no-repeat; 
}

출처

2013-09-30 04:12:52

이미지를 탐색 표시 줄에 표시하려면 어떻게해야합니까?

답변

관련 문제