前端 - css在不改变背景图的高度的情况下，让被遮挡的部分显示出来？

Question

.video-wrapper.video-5 {    height: 633px;    display: flex;    align-items: center;}.video-wrapper.video-4 {    position: relative;    overflow: hidden;}.video-wrapper .font-weight-bold {    font-size: 45px !important;    font-weight: 900;    margin-bottom: 15px;}.book-appointment {    padding-bottom: 80px;    margin-top: -150px;    overflow: visible;}.tj-inner {    position: relative;    padding: 55px 55px 10px 55px;    background-image: url('../img/home/bg-shape.png');    background-repeat: no-repeat;    background-size: cover;    background-position: 0 0;}.heading-appointment {    margin-bottom: 50px;}.heading-appointment h5 {    color: #ea1826;}.heading-appointment h2 {    margin-bottom: 20px;}.heading-appointment p {    color: #fff;    max-width: 500px;    width: 100%;}.book-appointment .progress_bar {    max-width: 510px;    margin-top: 40px;    margin-bottom: 25px;}.popular-causes__progress {    margin-bottom: 20px;}.popular-causes__progress .popular-causes__goals p {    color: #111;    font-weight: 900;    margin-bottom: 0;}.popular-causes__progress .bar {    position: relative;    width: 100%;    height: 7px;    background: #d9d9d9;    border-radius: 3px;    margin-bottom: 15px;}.popular-causes__progress .bar-inner {    position: relative;    display: block;    width: 0;    height: 7px;    margin: 10px 0;    border-radius: 3px;    background: #ea1826;}.heading-appointment .action-call {    position: relative;    z-index: 1;    display: flex;    align-items: center;    gap: 10px;}.heading-appointment .action-call .icon {    width: 45px;    height: 45px;    border-radius: 400px;    background-color: #fff;    display: flex;    position: relative;    overflow: hidden;    justify-content: center;    overflow: hidden;    align-items: center;    color: #ea1826;    border: 1px solid #fff;    transition: all .4s ease-in;}.heading-appointment .action-call .icon i {    font-size: 18px;    line-height: 0;}.heading-appointment .action-call:hover .icon {    border: 1px solid #ea1826;    background: #ea1826;    color: #fff;}.heading-appointment .action-call .content h6 {    text-align: start;    font-weight: 900;    color: #fff;    margin-bottom: 0;}.heading-appointment .action-call .content span {    font-style: normal;    text-align: start;    font-weight:900;    font-size: 16px;    line-height: 26px;    color: #fff;}.tj__frome__widget {    background: #fff;    box-shadow: 0 0 45px 0 #0000001a;    margin-bottom: -110px;}.tj__frome__head {    padding: 20px 20px 50px 20px;    background-color: #ea1826;    clip-path: polygon(200% 0,100% 60%,50% 100%,0 60%,0 0);    text-align: center;}.tj__frome__head .tj__frome_sub-title {    font-size: 22px;    color: #fff;    margin-bottom: 0;}.tj__frome__body {    padding: 35px 40px 50px 40px;}.tj__frome__body .form-group {    position: relative;}.tj__frome__body .form-group {    margin-bottom: 20px;}.tj__frome__body input {    height: 55px;    border-radius: 0;    font-size: 14px;}.tj__frome__body textarea {    font-size: 14px;    border-radius: 0;}.form-control {    border-radius: 2px;}.tj__frome__body i {    padding: 20px 20px;    position: absolute;    top: 0;    right: 0;    color: #bbb;}.tj__frome__body .form-group.tj_form__submit {    width: 100%;    margin-top: 10px;    margin-bottom: 0;}.tj__frome__body button {    width: 100%;    padding: 12px;    border: 0;    background-color: #ea1826;    color: #fff;    font-style: normal;    font-weight: 900;    font-size: 18px;    border-radius: 2px;    line-height: 28px;    -webkit-transition: all .4s ease-out 0s;    -moz-transition: all .4s ease-out 0s;    -ms-transition: all .4s ease-out 0s;    -o-transition: all .4s ease-out 0s;    transition: all .4s ease-out 0s;}.tj__frome__body .form-control:focus {    border-color: #ea1826;    outline: 0;    box-shadow: none;}

<section class="section video-wrapper video-4 video-5 section-padding bg-cover"        data-bg-image="assets/img/video/video-2.jpg" style="background-image: url('./img/home/video-2.jpg');">        <div class="container">            <div class="row">                <div class="col-12 text-center">                    <div class="text-white font-weight-bold wow fadeInUp">提供全面的服务和 <br>&amp;先进的设备 </div>                </div>            </div>        </div>    </section>    <div class="book-appointment">        <div class="container">            <div class="tj-inner wow fadeInUp">                <div class="row">                    <div class="col-md-7">                        <div class="heading-appointment">                            <h5 class="section_sub__title">预约预定</h5>                            <h2 class="text-white section_title">用我们的专业获取您的需求<br />解决方案</h2>                            <p>欢迎，在这里，你可以找到一些最常见的问题，收到关于我们服务的最佳答案</p>                            <div class="progress_bar">                                <div class="popular-causes__progress">                                    <div class="popular-causes__goals d-flex justify-content-between align-items-center"                                        style="width: 75%;">                                        <p class=" text-white">服务关系</p>                                        <p class=" text-white text-end">80%</p>                                    </div>                                    <div class="bar">                                        <div class="bar-inner count-bar counted" data-percent="70%" style="width:70%;">                                        </div>                                    </div>                                </div>                            </div><a href="#" class="action-call d-flex">                                <div class="call-icon">                                    <div class="icon"><i class="fa-solid fa-phone"></i></div>                                </div>                                <div class="content">                                    <h6>联系电话</h6><span>[phone]</span>                                </div>                            </a>                        </div>                    </div>                    <div class="col-md-5">                        <div class="tj__frome__widget">                            <div>                            <div class="tj__frome__head">                                <h6 class="tj__frome_sub-title">期待你的留言</h6>                            </div>                            <div class="tj__frome__body">                                <form id="inspection-form" class="needs-validation" novalidate="novalidate">                                    <div class="row">                                        <div class="col-12">                                            <div class="form-group">                                                <input class="form-control" type="text" id="name" placeholder="姓名:"                                                    required />                                                <div class="invalid-feedback">                                                    请输入姓名                                                </div>                                            </div>                                        </div>                                        <div class="col-12">                                            <div class="form-group">                                                <input class="form-control" type="text" id="email" placeholder="邮箱:"                                                    required />                                                <div class="invalid-feedback">                                                    请输入邮箱                                                </div>                                            </div>                                        </div>                                        <div class="col-12">                                            <div class="form-group">                                                <input class="form-control" type="text" id="phone" placeholder="手机号:"                                                    required />                                                <div class="invalid-feedback">                                                    请输入手机号                                                </div>                                            </div>                                        </div>                                        <div class="col-12">                                            <div class="form-group">                                                <textarea class="form-control" name="message" cols="5" rows="2"                                                    placeholder="备注:"></textarea>                                            </div>                                        </div>                                        <div class="col-12">                                            <div class="form-group tj_form__submit">                                                <button type="submit">预约</button>                                            </div>                                        </div>                                    </div>                                </form>                            </div>                        </div>                        </div>                    </div>                </div>            </div>        </div>    </div>

Answer 1

默认应该是会显示的，不显示的话应该是父级有 overflow: hidden; ，干掉就好了