CSS踩坑记录
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;