Background-color sets the difference between background color and background

Background-color sets only the background color, and background sets the entire background.

When the element itself is background-image, if background-color is set, the image will not be overwritten, and background-color will be at the bottom of the image. If background is set, the image will be overwritten by color.

As shown in the figure below, the background-image and background-color effects are set respectively. If background: black is set, the image will be overwritten by black, but the image will still exist, just overwritten.

background-attachment

Defines whether background-image is scrolled to follow the container’s scroll. Does not apply to background-color.

background-attachment = scroll | fixed | local

When background-attachment: fixed, the background-image background does not scroll with the element.

background-position

Defines the position of background-image inside the container. Does not apply to background-color.

background-position = [ left | center | right | top | bottom | length-percentage ]

body { background-positon: right top }    / * * / 100% 0%
body { background-positon: top center }   / * * / 50% 0%
body { background-positon: center }       / * * / 50% 50%
body { background-positon: bottom }       / * * / 50% 100%
Copy the code

Here is the effect of background-Positon: Center:

Visibility: hidden and display: none Impact on background-image

Background-image corresponds to a static resource image, which will be requested for rendering before the page is rendered.

Visibility: hidden, the element will still be in the DOM tree, but will not be displayed; Display: None, the element does not exist in the DOM tree.

When the element visibility: Hidden, the image resource will still be requested, but will not be displayed; When the element is set to display: None, the image resource is neither requested nor displayed. Another scenario: if a scroll bar appears on the page, will background-image static resources below the scroll bar (that is, outside the view) be requested? The answer is yes. The banckGround-image resource on which the element depends will be called back whenever it exists in the DOM tree, whether shown or hidden.

This is a good place to start thinking about resource request performance.

Reference:

www.w3.org/TR/css-back…