Basic attributes

  1. Background-color Specifies the background color to use
  2. Background-position Specifies the position of the background image
  3. Background-size Specifies the size of the background image
  4. Background-repeat Specifies how to repeat the background image
  5. Background-origin Specifies the location area of the background image
  6. Background-clip Specifies the drawing region of the background image
  7. Background-attachment Sets whether the background image is fixed or scrolls along with the rest of the page
  8. Background-image Specifies one or more background images to use

Share the grammar

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Copy the code

Special example: Be careful when using a background gradient and a background color at the same time: the gradient property needs to be written after the image link, otherwise it will not work

The following example is used in WeChat applet example, filter, getImageFromServer is a method of WXS, obtain the image links.

style="background: url({{filter.getImageFromServer('index/live_bg.png')}}) right top/368rpx 222rpx no-repeat,linear-gradient(180deg, #FF4B33 0%, #FFFFFF 100%);"
Copy the code