preface

The business requirement is to use two images for vertical stitching as the background of the page, and the rest of the position is filled with solid color, which is used as the drop-down to load more background.

inertia

In previous development, I had never encountered such a complex background requirement.

So the first thing that came to mind was to use the image as the background image, and remove it from the document flow by setting absolute positioning. It’s written roughly as follows

<div class="p-i"> <div class="p-i-bg"> <image src="xxx" class="p-i-bg-bgTop"/> <image src="xxx" class="p-i-bg-bgMid"/> </div> <! </div>. P -i{width: 100vw; min-height: 100vh; background: grey; /* position: relative */ /* z-index: -2 */ &-bg{ position: absolute; /* z-index: -1 */ &-bgTop{ width: 100vw; } &-bgMid{ width: 100vw; }}}Copy the code

It is expected that the whole P-I-BG module will be in the lower layer, while the main content of the page will float above, arranged from the top of the page down, and the P-I-BG module will be filled with a gray background.

Actual observation found that the P-I-BG module covered the main content; If p-I-BG z-index: -1 is set, the contents of p-I-BG module are directly invisible, and a gray background is displayed.

Leading issue: Cascading context

  • About cascade context, in detail you can refer to Zhang Xinxu blog: www.zhangxinxu.com/wordpress/2…

  • Conclusion: Cascade priority:

    Background /border< negative z-index< block block horizontal box < float float box < inline horizontal box < Z-index :auto/ Z-index :0< positive Z-index

    According to this rule, we can find that. After the P-I-BG module is declared absolute, z-index is initialized to auto by default, so it takes precedence over the normal block box, so it overrides the body content.

The solution

  1. This can be resolved by setting the hierarchy:
  1. explicitlyp-iThe page is set to relative location and z-index is set to -2.
  2. willp-i-bgThe z-index of the module is set to -1.
  1. At this point it will followSolid background -> p-i-bg Module -> Body contentThe pages are displayed sequentially.
  1. Use the CSS background property as a placeholder.

Good background solution

I have only used solid color background and single image background before, but I have never tried to complete it by using background attribute under complex background requirements.

The ability to check and find background is much stronger than I imagined. For details, please refer to MDN: developer.mozilla.org/zh-CN/docs/…

To summarize, background supports a single background and can be joined together with multiple backgrounds, which can be separated by commas.

  • Combination of writing
.class-name{
	background: url('xx') no-repeat width height,
    					url('yy') no-repeat width height,
    					grey;
}
Copy the code
  • A separate written
.class-name{ background-image: url('.. /.. /assets/index/background-top.png'), url('.. /.. /assets/index/background-middle.png'); background-repeat: no-repeat, no-repeat; background-color: #B7C6D3; background-size: w1 h1, w2 h2; background-position: 0 0, 0 h1; // Background upper-left coordinate}Copy the code

The use of background attributes perfectly ADAPTS to the scene, and the writing style is beautiful and the structure is clear.

No longer need to write background with image