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

Menu