CSS background Tula compatible with mainstream browsers such as FF Chrome IE (RPM)

Note: This article welcomes the reprint, the following for my pro-test, reproduced please specify: http://blog.csdn.net/wqmain/article/details/8844286

I believe you have encountered this situation, the button as a div background map to show that there are actually many such buttons, and the text in the Div, that is, the text content and the number of buttons to display, this situation needs to use the background image stretching effect to deal with, just do a button picture, As the background of the Div, it is OK to adapt to the width or height of the div. Online also looked for, but not compatible with IE or have a bug, the following posted my pro-test code, compatible with mainstream browsers, including Firefox, Chrome and IE and other mainstream browsers (ie using filter effect):

. BTN_BG{width:150px;Height:50px;Background-image:URL (./btn.png);-moz-background-size:100% 100%;-o-background-size:100% 100%;-webkit-background-size:100% 100%;background-size:100% 100%;-moz-border-image:URL (./btn.png) 0;background-repeat:no-repeat\9;Background-image:none\9;Filter:Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= './btn.png ', sizingmethod= ' scale ') \9; }

Once you have defined the above CSS, you can use it in the page, for example:

<div class= "BTN_BG" ></div>

In the. BTN_BG style: Width and height define the default width of the background map, and if the div that does not define and references the style does not define the width, the width of the background map stretches to the width of the browser, and the width of the div can be specified to stretch the background image, such as: <div class= "BTN_BG" style= "width:300px" ></div>.

Careful you will find that the last three lines of code after each line of style are added \9 this is specified in the IE8 and the following browser style.

CSS background Tula compatible with mainstream browsers such as FF Chrome IE (RPM)