CSS 스프라이트 위치

나는 hover에서 색상을 변경할 플러스를 사용하고자하는 링크가 있습니다. CSS 스프라이트 위치

Plus

그러나 지난 시간에 나는 spites이 트릭을 수행하는 방법을 알아낼 질수. 여기

특별한 링크, 아무것도

<a href="detailed.html" class="plus">Find Out More!</a>

내 CSS 코드

.block a.plus { 
    background: url("images/plus.png") no-repeat 0% 40%; 
    background-position: 10px , 0px; 
    font-size: 12px; 
    padding-left: 25px; 
} 

.block a.plus:hover{ 
    /*Just for example*/ 
    background-position: -15px -1px; 
}

그리고이가 당신을 가능하게하기 때문에 enter image description here

출처

2012-06-23 NoNameZ

원하는 것을 원하십니까? 사용자가 더하기를 클릭하면 텍스트의 색을 바꿀 수 있습니까? – Sajmon

예, 보시다시피, 첫 번째 화면에는 2 개의 플러스가 표시되고, 회색 만 필요합니다. 호버에는 빨간색이 표시됩니다. – NoNameZ

@ hawaii.five-0 미래에는 CSS Sprite 위치를 충분히 읽어보십시오. 거기에 다른 이미지에 대한 무언가가 ??? – NoNameZ

CSS 스프라이트는 종종 수직 배열도 플러스 IMG, 스프라이트 파일에 특정 행만 표시하십시오. 수평 배열 된 이미지를 스프라이트 기술을 사용하기 위해서는 당신은 불투명 배경으로 두 번째 요소를 만들 수 있습니다

<a href="detailed.html" class="plus"> 
    <span>Find Out More!</span> 
</a> 

.block a.plus { 
    background: url("images/plus.png") no-repeat 0% 40%; 
    background-position: 10px , 0px; 
    font-size: 12px; 
    display: inline-block; 
    padding-left: 16px; /* actual width of one icon */ 
} 
.block a.plus:hover{ 
    /*Just for example*/ 
    background-position: 0 -16px; 
} 
.block a.plus span{ 
    background-color: #fff; 
}

당신이 당신의 아이콘을 재 배열해야 제 2 구성 요소를 사용하지 않으려면.

출처

2012-06-23 14:28:19 Zeta

Not working https://dl.dropbox.com/u/14396564/screens/screen_plus.png – NoNameZ

고마워, 제 실수를 이해했습니다. – NoNameZ

@NoNameZ :'a.plus'에'display : inline-block'을 추가하려고 했습니까? – Zeta

: before 선택기로이를 수행 할 수 있습니다.

<a href="detailed.html" class="plus">Find Out More!</a> 

a.plus { 
    position: relative; 
    padding-left: 25px; 
} 

a.plus:before { 
    position: absolute; 
    left: 0; 
    content: " "; 
    width: 15px; 
    height: 15px; 
    background: red url("images/plus.png") 10px 0 no-repeat; 
}

색상 red은 테스트 용이므로 남겨 둘 수 있습니다. -10px 0은 스프라이트의 이미지 위치입니다 (x y).

출처

2012-06-23 15:00:39 sven

CSS 스프라이트 위치

답변

관련 문제