How can css add text with complex structure to pictures more efficiently?

It is often encountered in work that there are many other structures and styles on one picture

If the internal structure of the picture is complex, relative positioning back and forth, and absolute positioning will be dizzy. You can use it to position a box on the picture, and then operate the style in the box, which is much simpler.

Directly on the method:

父盒子{
position: relative
  父盒子内图片{
    width:100% 让图片铺满整个父盒子
  }
  在图片上的文本部分{
  position: absolute 
  left: 0
  top: 0 这样就使一个空盒子完全定在图片上啦，我们后续要做什么操作，直接在这个盒子里面写，非常方便
  }
}

The personal test is very convenient, because every time I need to position the style on the picture, I basically write it like this.

How can css add text with complex structure to pictures more efficiently?

Guess you like