时间戳

首页 > 解决方案 > 如何根据css中的网页修复背景？

html - 如何根据css中的网页修复背景？

问题描述

我将半径背景设置为固定宽度和高度，但是当我当时缩小时，它只反映内容而不反映在背景上。我该如何解决？

这是我当前的页面：-

当我缩小网页背景保持不变时，它不会改变

在此处输入图像描述

这是我的CSS代码： -

.main {
    overflow: hidden;
}

.bg {
    width:100%;
    height:40vw;
    border-bottom-left-radius: 80%;
    border-bottom-right-radius: 80%;
    background-color:  #f0f5f5; 
 }

这是我的html代码：-

<div class="main">
    <div class="bg">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>Join Pragra!</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    <button class="btn">Contact us!</button>
                </div>
                <div class="col-md-6">
                    <img src="/assets/images/faq-banner.png">
                </div>
            </div>
        </div>
    </div>
</div>

标签： htmlcss

解决方案

原因是您将高度设置为 40vh（视口高度），因此无论您放大还是加宽，它仍然具有 40vh（浏览器窗口高度的 40%）。所以解决方案很简单：只需将值设置为固定数字，例如：

.bg {
    height: 500px;
}

推荐阅读