헤더에 배경 이미지가 표시되지 않습니까?

필자는 CSS에 새로 왔으며 내 머리글에 대한 이미지가 표시되지 않습니다. 내 머리글에 추가하려고 할 때마다 nav는 약간 더 어두운 색조의 빨간색을 얻습니다. 너와 천재의 마음이 그것을 알아 낸다!헤더에 배경 이미지가 표시되지 않습니까?

CSS :

header { 
    background: url("http://www.charlottecentercity.org/wp-content/uploads/2013/09/Imaginon-pic.jpg"); 
    background-size: cover; 
    image-repeat: no-repeat; 
    } 
    ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    vertical-align: middle; 
    line-height: 70px; 
    display: inline; 
    } 
    li { 
    display: inline; 
    } 
    nav { 
    background: rgba(255,0,0,0.5); 
    } 
    nav img { 
    height: 60px; 
    margin: 5px; 
    float: left; 
    }

HTML :

<header> 
    <nav> 
    <img src="https://dl.dropboxusercontent.com/u/105222237/RGBjpeg.png" /> 
     <ul> 
      <li><a href="#">About Imaginon</a></li> 
      <li><a href="#">General Info</a></li> 
      <li><a href="#">Programs and Events</a></li> 
      <li><a href="#">Plan Your Visit</a></li> 
      <li><a href="#">Just for Fun</a></li> 
     </ul> 
    </nav> 
</header>

출처

2014-07-20 8bitcodecat

배경 이미지 는 헤더에 표시이지만 :

이 만 맨, 파란색 부분을 참조 즉, background-size: cover로 설정됩니다. 아마도 더 많은 콘텐츠가있을 때 더 많은 헤더가 표시되지만, 예를 들어 min-height: 600px;을 추가 할 수 있습니다.
nav는 헤더 배경색 위에 앉아있는 붉은 반투명 배경색을 가지고 있습니다. 당신이 그것을 원하지 않는다면 그 붉은 색을 제거하십시오.

출처

2014-07-20 22:58:23

시도하고 헤더 (최소/최대) 너비/높이

출처

2014-07-20 22:49:06 molerat

이 .. 헤더에 CSS overflow:hidden를 추가하고 할 줄 나중에 모든 래퍼 요소에 동일하게 이 표시됩니다.

출처

2014-07-20 22:54:50 Hardy

크기가 정의되지 않은 것을 채울 수 없으므로 정의 된 크기를 지정하십시오. 스타일 시트가 나는 보통이 같은 하위 폴더에있는 경우

header { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100px; 
    background: url(../wp-content/uploads/2013/09/Imaginon-pic.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

, 추가해야합니다 ".."이미지 위치로 다시 하나의 디렉토리 단계로 CSS를 알 수 있습니다. 직접 경로를 사용하면 거대한 거래가 아닌 다른 http 요청이 필요하지만 장기적으로 사이트가 느려집니다.

웹킷 배경 코드가 포함되어 있기 때문에 사용하기 쉽습니다. 브라우저 호환성을 생성 할 수 있습니다.

출처

2014-07-20 23:05:03 jjonesdesign

헤더에 배경 이미지가 표시되지 않습니까?

답변

관련 문제