相关疑难解决方法(0)

我正在使用twitter bootstrap carcass进行我的web项目开发.目前我有全屏幕背景图像,我为body标签设置如下:

body {
  background: url('Content/images/planet.gif') no-repeat center center fixed;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

它看起来不错,当我试图改变浏览器窗口大小时,调整大小完美.

现在我想通过添加背景轮播为我的网站添加一些视觉效果.有没有办法在整个背景下实现标准的bootstrap轮播？

我在这里找到了一个可能的解决方案,但令我困惑的是 - img标签用于不同的图像.我试图通过背景网址做同样的事情,但无法弄明白.

我想知道如何在Bootstrap的Carousel示例中获得100%适合屏幕的旋转木马,而不是它现在显示的方式,这允许一些空白的圆形图像在加载时包含在主着陆页中.

这是我正在努力工作的简单例证.

页面源(相关位):

<!-- Carousel
  ================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> …

我想在页面顶部有一个导航栏。在其下方，我想要我的轮播，它应该始终占据整个剩余的屏幕。

这是我的导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/artworks">Artworks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/collection">Fashion Collection</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Contact me</a>
                </li>
            </ul>
          <form class="form-inline my-2 my-lg-0">
                <a class="navbar-brand" href="/">
                    <img src="/images/logo.png" height="30" class="d-inline-block …