고정 헤더의 반응하는 투명 로고

첨부 된 이미지에서 어떻게 효과를 얻을 수 있는지 알고 싶습니다. 상단 탐색에 대한 배경이 아직 있지만 로고는 이미지이며 투명합니다.고정 헤더의 반응하는 투명 로고

이렇게 사용자가 아래로 스크롤하면 로고가 뒤에 이미지 또는 색상을 기준으로 "변경"됩니다.

주 div (100 % 너비 및 80px 높이) 내에 두 개의 div (로고 및 링크)를 만들려고했습니다. 로고의 너비가 200 픽셀이면 오른쪽 구획이 항상 나머지 뷰포트를 채우도록해야합니다.

.mainnav{widht:100%;position:fixed;height:80px;} 
.logo {background:url(logo.png);float:left;} 
.links{width:???;background:#272727;float:right;}

어떤 도움을 주셔서 감사합니다. 다른 방법이 있습니다.

website example

출처

2014-01-07 hoektoe

로고 컨테이너가 반응하게 비율의 로고 및 링크의 폭을 제공합니다.

.logo{ 
width:20%; 
} 

.links{ 
width:80%; 
}

출처

2014-01-07 13:48:49

이 코드를보십시오 :

CSS : 제안 된 솔루션의

.mainnav{widht:100%;position:fixed;height:80px;} 
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:backg‌round-size:100% 100%;} 
.links{width:80%;background:#272727;float:right;}

출처

2014-01-07 13:48:59 Manoj

가 어떻게) 2 스트레칭하지 않습니다 1) 로고를 보장 것입니다 감사합니다, 나머지는 아무것도 할 수없고 빈 공간을 표시하는 것입니다. 3) 20 %가 200px보다 작 으면 배경 이미지 로고가 자릅니다. 내가 틀린다면 정정 해주세요. – hoektoe

.logo {background : url (logo.png); float : 왼쪽; 너비 : 20 %; 배경 반복 : 반복 없음 : background-size : 100 % 100 %; – Manoj

없음은 서로 다른 해상도에서 일했다.

최상의 솔루션은 아마도 2000px 이미지를 헤더 및 오버 플로우 : 숨김으로 사용하는 것입니다.

로고가 배경 이미지없는 반복으로하기 때문에

출처

2014-01-08 06:17:05 hoektoe

고정 헤더의 반응하는 투명 로고

답변

관련 문제