Question

我有一个模态，并且有一个背景图片。我唯一需要做的就是缩小规模。但是，当我更改“宽度”时，它实际上会更改模态的宽度。我无法提出解决方案。我在Stackoverflow以及其他站点（例如CSS技巧）上阅读了许多其他文章，但找不到解决方案。任何想法都将受到欢迎。

/* Login Modal */
.login-modal-content {
  background-image: url('https://cdn.reebit.cl/images/isotipo.png');
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  background-position: right 20px bottom 10px;
}

.login-modal-header {
  border-bottom: 0px;
}

.login-modal-body {
  width: 100%;
  margin: 0 auto;
}

.login-modal-body img {
  width: 60%;
}

// My html seems correct to me //
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="modal fade bd-example-modal-lg login-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="loginModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content login-modal-content">
      <div class="modal-header login-modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body modal-body-img login-modal-body text-center col-lg-6 pb-5 pt-0">
        <img src="https://cdn.reebit.cl/images/header-logo.svg">
        <h5>¡Hola! Ingresa a tu cuenta</h5>
        <form class="login-form">
          <div class="form-group login-modal-form-email">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Correo electrónico">
          </div>
          <div class="form-group login-modal-form-password">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Clave">
          </div>
          <button type="submit" class="btn btn-block btn-modal-login">Ingresar</button>
        </form>
        <a href="#" class="login-password-forget">Olvidé mi clave</a>
      </div>
    </div>
  </div>
</div>

Answer 1

您可能想尝试使用background-size CSS属性：

/* Login Modal */
.login-modal-content {
  background-size: cotain; // Or 'cover'
  background-image: url('https://cdn.reebit.cl/images/isotipo.png');
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  background-position: right 20px bottom 10px;
}

这里也有一个很好的教程：https://css-tricks.com/almanac/properties/b/background-size/

如何在模态中缩放背景图像？

1 个答案: