背景图像在断点处消失（引导程序）答案

【问题标题】：background image disappear on break point (bootsrap)背景图像在断点处消失（引导程序）
【发布时间】：2021-03-04 18:13:52
【问题描述】：

所以，你好，世界我正在开始一个新的网页设计职业，所以我遇到了第一个菜鸟问题，我试图在我的网页设计中并排放置图像和文本，但是当断点低于 560 像素时，图像消失了，我不知道为什么, 我希望有人可以帮助我这是 de CSS：

.proposito-img {
  background-image: url(../img/competencia.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: visible;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div id="#proposito-1" class="container-md mt-5">
    <div class="row">
        <div class="col-md-6 proposito-img">

        </div>
        <div class="col-md-6 fondo-morado texto-blanco g-0 p-5">
            <h3 class="fw-bold texto-blanco">
                Proposito
            </h3>
            <p class="justificado">
                El estudiante fundamentará la importancia de la epistemología, (rama de la filosofía que
                investiga sobre el conocimiento científico y expresa en teorías el resultado de esas
                investigaciones). Con la finalidad de investigar los fundamentos de la educación como
                construcción social de la realidad y sobre la condición educable del hombre.
            </p>
        </div>
    </div>
</div>

【问题讨论】：

可能图像没有消失而是改变了位置，因为您设置了 bg 大小的封面。请分享一个运行示例

标签： html css image bootstrap-5

【解决方案1】：

我在"proposito-img" 中添加了最小高度，因为col- 属性在代码（引导程序）中有min-height:1px。

.proposito-img {
background-image: url('https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: visible;
  min-height: 250px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  

<div id="#proposito-1" class="container-md mt-5">
        <div class="row">
            <div class="col-md-6 proposito-img">

            </div>
            <div class="col-md-6 fondo-morado texto-blanco g-0 p-5">
                <h3 class="fw-bold texto-blanco">
                    Proposito
                </h3>
                <p class="justificado">
                    El estudiante fundamentará la importancia de la epistemología, (rama de la filosofía que
                    investiga sobre el conocimiento científico y expresa en teorías el resultado de esas
                    investigaciones). Con la finalidad de investigar los fundamentos de la educación como
                    construcción social de la realidad y sobre la condición educable del hombre.
                </p>
            </div>
        </div>
    </div>

【讨论】：

【解决方案2】：

.col-md-6是在屏幕宽度大于等于mdbreakpoint时占用一半屏幕的断点。少一点，它就会消失！

【讨论】：