preface

Recently just in the writing page, met a more classic scene, then record it.

The business scenario

A paved background (background, background color, multicolor segmentation…) There is a content area (image, copy) in the middle. Such as:

The broken hand, don’t worry about it.

Implementation scheme

I think some experienced Daoist friends would laugh contemptuously at this scene and think, “It’s not too simple, ok?” Take Figure 1 as an example.

Plan a

Don’t tell me what layout, just cover the whole picture, also background, content, hum! The rubbish.

Scheme 2

Fill it with a background image and center the content area.

<div class="box">
  <div class="content"></div>
</div>
Copy the code
.box {
  width: 100%;
  height: 100%;
  background: url("line.png") repeat-x;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.content {
  width: 300px;
  height: 300px;
  background-color: blue;
}
Copy the code

Advantages: Strong compatibility. Disadvantages: requires the UI to provide a 1-pixel background; Add a request (request image) or increase CSS volume (base64) for solid color; Poor scalability, can only use background image and background color.

Plan 3

The background and content areas are superimposed as sibling nodes.

<div class="box">
  <div class="bg">
    <div class="white"></div>
    <div class="grey"></div>
  </div>
  <div class="content"></div>
</div>
Copy the code
.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.white {
  flex: 1;
  background-color: white;
}
.grey {
  flex: 1;
  background-color: grey;
}
.content {
  position: relative;
  background-color: blue;
  width: 300px;
  height: 300px;
}
Copy the code

Advantages: Strong compatibility; Easy to expand, flexible to use (the background as a separate block, can be played at will); Applicable to multiple scenarios. Disadvantage: less a chance to find UI sister

conclusion

There is more to it than that. Choose the simplest, most direct solution based on the actual situation. There’s nothing happier than leaving on time.

The last

I am not good at writing, so I don’t know if I have clearly expressed my thoughts. Please understand. If you have a better plan, please kindly advise me.

I wish you all a night of wealth.