CSS : 배경 위치가 다른 모서리 오프셋으로 인해 어려움

Question

여러 배경을 사용하여 버튼을 만드는 데 문제가 있습니다. 나는 내가 사용할 수 있다는 것을 안다 : before와 : after하지만 가능하다면 이것을 알아 내고 싶다.

다음은 Jsfiddle 점에서 http://jsfiddle.net/syren/qerUT/1/

가, 내가 궁극적으로 모양을 원하는 것을 보여준 것입니다. 그 중 하나, 나는 사용했다

background-position: left top, 97% 90%; 

그냥 내가 맘에 드는 것을 보여주기 위해서. 나는 다른 버튼과 번역에 사용할 적절하게 확장 할 수 있기를 원하므로,이를 사용하려면 :

background-position: left top, right 5px bottom 5px; 

하지만이 작동하지 않습니다. 사양에 따르면, 내가 뭘 잘못하고 있는지 잘 모르겠습니다. 어떤 아이디어? 감사!

Answer 1

나는 똑같은 일을 시도했다. 죄송 합니다만 현재로서는 right 5px bottom 5px에 대한 실질적인 지원이 없습니다.

내가 끝낸 것은 내 이미지를 찍고 실제로 이미지의 오른쪽과 아래쪽에 투명한 픽셀을 추가하여 내가 원하는 위치로 가져 오는 것이 었습니다. 그것은 예쁘지 않지만 여러 배경 이미지를 지원하는 모든 브라우저에서 완벽하게 작동합니다.

각 브라우저에서 지원되는 배경 기능의 전체 목록을 보려면 Standardista CSS3 Background Properties page을 방문하십시오. background-position에서 4-value 오프셋은 IE9 +와 Opera 11+에서만 지원된다고 나와 있습니다. 그 이후로는 부끄러운 일이지만, 전체적으로 지원되지 않는 CSS3 배경 기능 중 하나입니다.