Css3 background-size compatible with IE8 +,Chrome, Firefox

HTML5, Css3, Node, Webpack, Vue, Less, Sass and other technologies and knowledge are hot Web technologies in recent years. Today I will share how to support CSS 3 background-size style with IE8+ Chrome FireFox and other browsers.

The.bg in the text is used by the page element div, which acts as a container for the background image.

width : 30%;

height: 30%;

Controls the width and height of div responses.

background-image: url(xxx.jpg);

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scale’,src=’xxx.jpg’);

Background-image just gives the div container a background.

The filter is used in the progid is characteristic of the filter, IE DXImageTransform. Microsoft. AlphaImageLoader, IE is embedded an ActiveX controls, SizingMethod is set to scale to show that the background image changes with the size of the div.

-webkit-background-size

-moz-background-size

-ms-background-size

background-size

CSS 3 background-size support is compatible with all browser versions.

-WebKit: chrome private kernel style, -moz: Firefox private kernel style, -ms: Internet Explorer private kernel style.

If Internet Explorer 8 is used, the filter style is preferred, while -ms-background-size and background-size are ignored.

-ms-background-size = -ms-background-size; -ms-background-size = -ms-background-size;