Ask for advice on CSS layout problems, adaptive picture overlap location

as shown in the image above, the outer square red box is a background image with a 100% adaptive width, and the middle red circle is a coverage area. Because the background image is responsive, the range of the red circle will change. How can I cover a picture at the top and always have the width and height of the red circle equal to the width and height of the red circle? Ask for advice

Mar.22,2021

No way, isn't it just that your background picture is self-adaptive? as long as you set the width and height on it, you can just set the width and height

.

.logo{
    width:200px;
    heigth:200px;
    border-radius:100% ;
    position: absolute;
    top:50%;
    left:50%;
    tranform:tranlate(-50%,-50%)
}

parents are unique, located in the implementation, or written in JS.


isn't that how to center vertically and horizontally

http://jsrun.net/pWgKp/edit

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b37e27-2b920.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b37e27-2b920.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?