2012-10-04 7 views
0

내 체크 박스에는 배경 이미지가 포함되어 있으며 클릭하면 그 위에 양수 기호가 나타납니다.기존 이미지에 배경 이미지 추가

투명한 배경을 가진 두 번째 GIF 이미지를 원래의 이미지 위에 추가하는 방법을 생각했습니다. 클릭하면 양수 기호 배경 이미지가 나타나야하며 다시 클릭하면 사라집니다. 일반적으로

2 배경 이미지는 쉼표 분리가 가능하다 :

background: url(image1.png) , url(image2.png); 

그것은 단지 기존에 1을 추가로 CSS를 사용할 수 있습니까?

나는 분명히 자신을 설명하기를 희망한다. 덕분에 부착

간단한 예를

는 : http://picturepush.com/public/10656582

답변

0

당신이 선택하면 모두 아이콘 이미지의 배경 위치를 변경하는 CSS 스프라이트를 사용할 수 있습니다. 일반적으로 체크 박스의 이미지는 여러 브라우저에서 제대로 지원되지 않습니다. 대신 래핑 요소에서이 작업을 수행해야 할 수 있습니다.

+0

정확한 해결책이 포함되어 있다면 좋은 답변이라고 할 수 있습니다. 그렇지 않으면 주석이 될 수 있습니다. – Dev

+0

나는 100 개의 체크 박스를 가지고 있는데, 홀 아이디어는 그것들 모두에 대해 하나의 양수 부호만을 가지고있다. CSS sprite는이 경우에 도움이되지 않습니다. – elkana

0

음, 어떻게하는지 잘 모름. 당신은 CSS에서 체크 박스의 입력을 목표로 할 수있는 방법을 원하는 경우에 당신이 정말로 다음 UST 수있는 체크 박스에 배경 이미지를 사용할 수 있다면 당신은 단지에 첫 번째는 다음 하나 개의 이미지를 포함

input[type=checkbox] { 

} 
input[type=checkbox]:checked { 

} 

을 사용합니다 : 하나를 선택 두 이미지를 모두 갖습니다. 그런 식으로 체크 박스를 체크하면 : checked에있는 내용이 적용되고 다른 이미지 위에 더하기 기호가 표시됩니다.

+0

thats 내가 이미 알고있는 경우, 내 질문에 추가 할 수 있습니다 "입력 [type = checkbox] : checked {"단지 첫 번째 그림을 추가하는 방법이 방법은 한 번에 모든 positve 기호를 변경할 수 있습니다 원하는 경우 img . – elkana