배경 이미지가 포함 된 반응 CSS 버튼

배경 이미지가 포함 된 반응 형 버튼을 어떻게 얻을 수 있습니까? 마치 http://codecanyon.net/item/css3-responsive-pagination/full_screen_preview/4266559 입니다. 그러나 제 경우에는 "prev"및 "next"버튼이 정말 긴 텍스트이고 페이지의 "제목"일뿐입니다.배경 이미지가 포함 된 반응 CSS 버튼

배경 이미지를 스케일링하여 스케일 된 버튼에 맞추고 IE에서 작동하는지 확인하는 데 어려움이 있습니다.

누구도 전에 한 적이 있습니까? 심지어 가능합니까?

감사합니다,
티

출처

2013-07-31 teepusink

비슷한 내용에 대한 링크를 제공해 주셨지만 실제 문제 자체를 표시 할 수 있습니까? 어쩌면 jsfiddle/codepen (그리고 문제의 스크린 샷)에 코드를 제공하십시오. 그것은 우리가 그것을 더 잘 이해하는 데 도움이 될 것입니다. –

대상 브라우저 지원 CSS3는, 단순히 배경 크기를 사용하는 경우

.button 
{ 
background:url(img_flwr.gif); 
background-size:contain contain; 
background-repeat:no-repeat; 
}

편집 : 아래 IE8을 지원해야 할 때, 당신이 시도 할 수 있습니다 :

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale'); 

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale')";

또는 dl ie-css3.htc 및 :

behavior: url(ie-css3.htc);

출처

2013-07-31 04:25:28 Horst

배경 크기를 지원하지 않으므로 IE에서는 작동하지 않습니다. –

[IE9 이후 가장 확실합니다] (http://caniuse.com/background-img-opts). 또한'background-size : contains contains' 대신에 'background-size : contains'를 쓰는 것이 좋습니다. 가로 세로 비율을 유지하는 것이 요점입니다. 폭과 높이를 따로 지정하는 것은 지나치게 혼란스러워 보입니다. 그래도 스타일 선호도. –

죄송 합니다만, 나는 단지 10+라고 생각했지만, @teepusink가 IE의 버전을 지정하지 않았기 때문에 9 또는 10보다 더 의미가 있다고 가정했습니다. –

배경 이미지가 포함 된 반응 CSS 버튼

답변

관련 문제