Question

我已尝试这样做，以使我的书本应该是背景图片的最大高度，并且如果文本不能容纳在框中，则在该高度处，它将溢出。好吧，我已经做到了，是的。问题在于，当它在移动设备上时，它不会使我的所有文字都无处不在，而只会使文字高度变大。在手机上，如何解决此问题，使其充满背景色。

var CocktailHeight = $("#cocktails").height();
var bartenderHeight = $("#Bartender").height();

$("#MenuKort").css({
  "height": CocktailHeight
});
$(".ResponsivMenukort").css({
  "max-height": ResponsivMenukort
});

.ResponsivMenukort {
  overflow-y: scroll;
}

#BrandSlogan {
  margin-top: 5px;
  font-family: 'Ailerons-Regular';
  color: #fff;
  font-size: 25px;
}

#cocktails {
  background-image: url('images/CocktailsBg.png');
  height: 100%;
  background-position: center;
  background-size: cover;
  margin-left: 15px;
  margin-right: 15px;
}

#MenuKort {
  background-color: rgba(249, 249, 249, 0.75);
  padding: 18px 45px 18px 45px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ResponsivMenukort row col-lg-5 col-md-12">
  <div id="MenuKort">
    <div class="text-center">
      <hr style="float: none; margin-bottom: 25px; width: 100%;" />
      <h1 id="cocktailsOverskrift">Cocktails</h1>
    </div>
    <div id="MenuKortIndhold">
      <h3>Mojito</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Angostura Reserva Rom & Bitters - Danskvand - Frisk Lime & Mynte- Rørsukker - Knust is
                            </span>
      <br /> <br />
      <h3>White Russian</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Absolut Vodka - Kahlua likør - Dansk Sødmælk - Knust is
                            </span>
      <br /> <br />
      <h3>Strawberry Daiquiri</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Angostura Reserva Rom - Friske Jordbær - Frisk Limejuice - Rørsukker - Isterninger
                            </span>
      <br /> <br />
      <h3>cosmopolitan</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Absolut Vodka - Cointreau - Tranebærsaft - Frisk Limejuice
                            </span>
      <br /> <br />
      <h3>espresso martini</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Absolut Vodka - Hahula likør - Espresso
                            </span>
      <br /> <br />
      <h3>Margarita</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Jose Cuervo Tequila - Cointreau - Frisk Limejuice - Knust is
                            </span>
      <br /> <br />
      <h3>Pina colada</h3>
      <hr style="margin-top: 7px;" /><br />
      <span class="DrinkTekst">
                                Angostura Reserva Rom - Ananas Juice - Kokoscreme - Dansk Sødmælk
                            </span>
    </div>
  </div>
</div>

任何可以看到的，我在做什么错？以下是错误外观的图片：http://prntscr.com/m4938d

背景颜色不跟随全文

0 个答案: