동적으로 CSS

Question

내가 오른쪽에있는 이미지처럼 크기를 다음 페이지의 왼쪽에있는 이미지를 만들려고로 스프라이트 이미지 크기를 조정 작은/큰 :

http://www.hugoproject.com/test.html

왼쪽 이미지에 스프라이트를 사용하고 있습니다. 내 코드는 다음과 같습니다

HTML

<div id="home-projects"> 
<div id="projects"> 
    <div class="project-group"> 
    <div class="project"> 
    <a href="#" class="HS" class="project-link">Arrow<span></span></a> 

            </div> 
</div> 
</div> 

CSS 내가 잘못 뭐하는 거지

#home-projects { 
text-align: center; 
overflow: hidden; 
position: relative; 
}  

#projects { 
    width: 100%; 
} 

.project-group { 
width: 100%; 
height: 100%; 
position: absolute; 
} 
    .project { 
     float: left; 
     text-align: center; 
    width: 33.3%; 

} 
    .project-link { 
     background-size: cover; 
     background-repeat: no-repeat; 
     background-position: center; 
     background-color: #adadad; 
     position: relative; 
     overflow: hidden; 
     display: inline-block; 
     width: 80%; 
    } 
    .circle .project-link, .circle .project-link .hover { 
     border-radius: 100%; 
     -moz-border-radius: 100%; 
     -webkit-border-radius: 100%; 
    } 
    .project-link .hexagon-top { 
     content: ''; 
     display: block; 
     position: absolute; 
     left: 0; 
     border-style: solid; 
     border-bottom-color: transparent; 
     border-left-color: #dfdfdf; 
     border-right-color: #dfdfdf; 
     width: 0; 
     height: 0; 
     z-index: 2; 
    } 
    .project-link .hexagon-bottom { 
     content: ''; 
     display: block; 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     border-style: solid; 
     border-top-color: transparent; 
     border-left-color: #dfdfdf; 
     border-right-color: #dfdfdf; 
     width: 0; 
     height: 0; 
     z-index: 2; 
    } 
     .project-link .hover { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      font-size: 14px; 
      text-align: center; 
      color: #fff; 
      background: #ec6136; 
      text-decoration: none; 
      text-transform: uppercase; 
      display: block; 
      opacity: 0; 
      transition: all .3s; 
      -moz-transition: all .3s; 
      -webkit-transitin: all .3s; 
     } 
      .project-link .hover-text { 
       display: block; 
       margin-top: 45%; 
      } 
      .project-link .hover-text:after { 
       content: '>'; 
       font-family: 'icon'; 
       font-size: 12px; 
       margin-left: 15px; 
      } 
     .project-link:hover > .hover { 
      opacity: .9; 
     } 

.HS { 
display: inline-block; 
position: relative; 
text-indent: -9999px; 
    width: 283px; 
height: 213px; 
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat; 
} 

.HS span { 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat; 
background-position: 0 -214px; 
opacity: 0; 
-webkit-transition: opacity 0.5s; 
-moz-transition: opacity 0.5s; 
-o-transition:  opacity 0.5s; 
} 
.HS:hover span { 
opacity: 1; 
} 

?

Answer 1

원하는대로 크기를 조정합니다 (Firefox에서는 적어도 다른 곳에서는 테스트하지 않았습니다). 주로 크기를 조정하기 위해 고정 된 크기가 아닌 %를 사용해야합니다.

.HS { 
display: inline-block; 
position: relative; 
text-indent: -9999px; 
width: 100%; 
height: 75%; 
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png"); 
background-position: 0px 0px; 
background-size: 800%; 
} 

.HS span { 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png"); 
background-position: 0px -100%; 
opacity: 0; 
width: 100%; 
height: 100%; 
background-size: 800%; 
-webkit-transition: opacity 0.5s; 
-moz-transition: opacity 0.5s; 
-o-transition:  opacity 0.5s; 
} 

.project { 
float: left; 
text-align: center; 
width: 33.3%; 
height:100%; 
} 

또 다른, 어쩌면 더 나은 옵션을 사용하면 다른 이미지와 같은 CSS를 사용할 수 있도록 실제로 별도의 이미지로 PNG를 자르기보다는 위치를 선택하는 것입니다.