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…