Absolute and Horizontally Centered

In this case, every tip-card need to horizontally centered with it's treasure chest.

Firstly every tip-card position is absolute, and it's child element of chest(relative).

left: 50%; // 设置左边距为父元素宽度的50%
transform: translateX(-50%); // 将元素向左移动该元素宽度的50%, 即使子元素的宽度大于父元素宽度，二者依然可以保持中心

if clicking the other part of this page, tip-card need to be invisible. So we need a transparent layer cover this page. eg.

if clicking one chest, this layer will appear with tip-card in document, and clicking the   layer, both of them disappear;

Background Image

Webpack can process image only this image exist in css file. So in some scenarios， background-image is necessary.

However, background-image doesn't has width and height. We need set it by hand;

And this article explain background-size's usage.

https://blog.csdn.net/wzj2584454/article/details/78100233

Last of Type

In this case, there is a line between two people's card.

Firstly, we can use ::after to add these line. But if you do this, a line unexpected appear behind last people's card!

This is Perfect!

Colorful Border

Those pics have colorful border, but we can not use border to achieve it. You can do this:

Yep! Using background-image, and put the content on it.

Use Margin to Center a Img

We can use margin:0 auto; to center a Img, but it not works. Because Img is inline-block. Use display:block;

Adaptive div width through text length :'fit-content'

width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;