Shulou(Shulou.com)06/01 Report--

The knowledge points of this article "how to set WeChat Mini Programs background and background color" are not quite understood by most people, so the editor summarizes the following contents to you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to set WeChat Mini Programs background and background color" article.

One: background (Background) and color (Color)

Background: background. Sets the background properties of the object. An element can set multiple background images, with each group separated by a comma. If there is an overlap, the previous background image will be overlaid on the back background image.

1.background-color: specifies the color of the background. Value: normal color value.

2.background-image: background picture. If this property is set, it is also advisable to add background-color to maintain a certain contrast to the text color when the background image is not visible

3.background-repeat: sets how the background image of the object is laid and filled.

Repeat-x: the background is tiled laterally.

Repeat-y: the background is tiled vertically.

Repeat: the background image is tiled horizontally and vertically.

No-repeat: the image is not tiled.

Round: the background image is automatically scaled until it fits and fills the entire container.

Space: the background image is tiled and filled with the entire container or a certain direction at the same spacing.

Space:

Round:

4.background-attachment: specifies whether the background image of the object is scrolled or fixed with the content of the object.

Value: fixed: fixed position. Scroll: fixed relative to the element, followed by the element. Local: fixed relative to the content of the element, always following the content.

5.background-position: specifies the background image location of the object.

Value: left,right,top,bottom,center. You can also use a percentage.

6.background-size: specifies the size of the background image of the object.

Value: auto: the true size of the background image. Cover: scales proportionally to fully cover the container. It could be beyond the container.

Contain: scale the background image to a width or height equal to the width or height of the container, always in the container.

7.background-clip: specifies the area where the background image of the object is cropped outward.

Value: padding-box: crop the background outward from the padding area (excluding padding).

Border-box: starts with the border area (excluding border) to crop the background outward.

Content-box: crop the background outward from the content area.

Text: crop outward from the shape of the foreground content as a crop area.

8.background-origin: specifies the origin at which the background image of the object is displayed.

Value: padding-box: crop the background outward from the padding area (excluding padding).

Border-box: starts with the border area (excluding border) to crop the background outward.

Content-box: crop the background outward from the content area.

The above is the content of this article on "how to set WeChat Mini Programs background and background color". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.