directory

  • define
  • The CSS syntax
  • DOM native syntax
  • JQuery syntax
  • compatibility
    • The mobile terminal
      • 4.4- Android phones do not support CSS3 background shorthand
      • IOS Safari can be ignored, right?
    • PC
      • polyfill for IE6-IE8
        • Use a filter
        • background-size-polyfill
  • Best practices

define

The background-size attribute specifies the size of the background image and is a cSS3 attribute.

The CSS syntax

background-size: length | percentage | cover | contain;

background-size param1 param2 rendering
length

(unit: px/rem/em, cannot be negative)		 160 px (width) 160 px (level)

[default:auto(if the width is fixed and the height is auto, the image is proportionally scaled)]
percentage

(Set the width and height of the background image as the percentage of the parent element, and cannot be negative)		 70% (width) 80% (height)

[default:auto(if width is fixed percentage and height is auto, the picture is proportionally scaled and the picture is fully displayed in the box)]
cover Background image to scale, according to the minimum edge for adaptation, redundant cutting –
contain The background is proportional and adapted according to the largest edge. The picture is fully displayed in the box, with white edges appearing in the less part –

DOM native syntax

DOMObj.style.backgroundSize="60px 80px"
Copy the code

JQuery syntax

jQObj.css("background-size"."60px 80px");
jQObj.css("backgroundSize"."60px 80px");
Copy the code

compatibility

You can see it in one picture.IE9+,Firefox 4+,Opera,ChromeAs well asSafari 7+supportbackground-sizeProperties.

NOTICE:

As you can see above, private prefixes are generally not required, but can be added for compatibility purposes

(Since many low-end phones or brushed low versions may not be supported, even if the version is Android 4.4+.

.test{
    background: url("./yw.png") no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
Copy the code

The mobile terminal

4.4- Android phones do not support CSS3 background shorthand

Android 4.4 does not support cSS3 background abbreviations, but does support CSS2.1 abbreviations. The shorthand form, in the postCSS processing, will not deal with the shorthand form of background, break them apart, so if you want to compatible with low-end models it is best to abandon the shorthand form, or after the shorthand separately fill the background-size processing.

Experimental cell phone:

  • Influenced by the blue m1,Androidversion4.4.4
  • Millet 2 a,Androidversion4.2.2
/* Yes CSS */
    .test{
        background: url("./yw.png") no-repeat;
        background-size: 100% auto;
    }
    .test{
        background-image: url("./yw.png");
        background-repeat:no-repeat;
        background-size: 100% auto;
    }

/* Not possible CSS */
    /* Case 1, short for css3 */
    .test{
        background: url("./yw.png") top/100% no-repeat;
    }
    /* Background-size auto*/
    .test{
        background: url("./yw.png") no-repeat;
        background-size: 100%; /* The second argument is not auto by default, it must be */
    }
Copy the code

IOS Safari can be ignored, right?

About Can I use

iOS Safari has buggy behavior with background-size: cover;

The iphone4s — version 9.3.5 and iphone5 — version 10.2 were tested without problems. I really can’t find a less low-end machine than this ￣ translation ￣, maybe this problem will only be available in the version below 6, so it can be ignored. Remember (゚∀゚) sweet (゚∀゚) blue

PC

polyfill for IE6-IE8

Use a filter

Use the width and height of div to control the width and height of the background so that the image fits fully into the border (like 100% 100%).

.test{
    width:600px; 
    height:400px;
    background: url("./yw.png") no-repeat;
    background-size: 100%;
    /* IE8 hack to remove background*/
    background: none\9;
    /* Set the CSS filter */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./yw.png', sizingMethod='scale');
}
Copy the code

If the filter sizingMethod is crop, it is simply crop cutting and has no effect on the size of the background image.

Filter Related parameters:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

Enabled: This parameter is optional. Boolean. Sets or retrieves whether the filter is active. True: default value. Filter activated. False: Filter is disabled.

SizingMethod: Optional. A String. Sets or retrieves how the image of the object on which the filter is applied appears within the boundaries of the object container:

1. Crop: Cut the image to fit the object size.

2. Image: default value. Increases or decreases the size boundary of the object to fit the image size. (Currently useless)

3. Scale: Scale the image to fit the size boundaries of the object.

SRC: mandatory. A String. Use an absolute or relative URL to specify the background image. If this parameter is ignored, the filter will not work.

background-size-polyfill
  • Ie7-8 compatible background-size-Polyfill

Best practices

Summary so much, in fact, according to their own specific situation to see whether they need to do compatible.

@version1.0 — 2019-1-15 — Create CSS3 — BACKground-size Summary and Compatibility Solution

© burning_ rhyme groups