0
클라이언트 용 시차 워드 프레스 사이트에서 작업하고 각 링크의 배경 이미지에 스프라이트가있는 네비게이션 막대가 있습니다. 여기에서 7 개의 링크 navbar (http://www.aishla.com/blog/2014/my-aish-test/)를 볼 수 있습니다. 이제는 데스크톱에서도 멋지지만 그 이미지를 반응 적으로 만들고 싶습니다. 즉, 디자인이 작아 질수록 작아집니다.CSS : 반응 형 네비게이션에 반응 형 네비게이션으로 배경 이미지 링크 만들기
CSS에서 배경 크기 설정을 사용할 수 있다고 생각했지만 미디어 쿼리를 시도했을 때 원하는 이미지의 일부가 아닌 전체 스프라이트가 href 내부에 나타납니다. 그래서이 방법을 달성하는 것이 가능한지 궁금하거나 다른 화면 해상도에 대한 일련의 스프라이트를 만드는 데 막혔다면 궁금합니다.
우선 데스크톱 버전 :
이제nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center; width: 137px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; }
미디어 쿼리 FIOR 최대 폭 768px :
nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; }
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }