Question

我想将英雄图像附加到HTML部分。但是问题在于，当该图像包装成一个部分时，它并没有像预期的那样显示整个页面。

例如

# /opt/mxe/usr/bin/i686-w64-mingw32.static-qmake-qt5 -query
QT_SYSROOT:
QT_INSTALL_PREFIX:/opt/mxe/usr/i686-w64-mingw32.static/qt5
QT_INSTALL_ARCHDATA:/opt/mxe/usr/i686-w64-mingw32.static/qt5
QT_INSTALL_DATA:/opt/mxe/usr/i686-w64-mingw32.static/qt5
QT_INSTALL_DOCS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/doc
QT_INSTALL_HEADERS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/include
QT_INSTALL_LIBS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/lib
QT_INSTALL_LIBEXECS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/bin
QT_INSTALL_BINS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/bin
QT_INSTALL_TESTS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/tests
QT_INSTALL_PLUGINS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/plugins
QT_INSTALL_IMPORTS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/imports
QT_INSTALL_QML:/opt/mxe/usr/i686-w64-mingw32.static/qt5/qml
QT_INSTALL_TRANSLATIONS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/translations
QT_INSTALL_CONFIGURATION:/opt/mxe/usr/i686-w64-mingw32.static/qt5/etc/xdg
QT_INSTALL_EXAMPLES:/opt/mxe/usr/i686-w64-mingw32.static/qt5/examples
QT_INSTALL_DEMOS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/examples
QT_HOST_PREFIX:/opt/mxe/usr/i686-w64-mingw32.static/qt5
QT_HOST_DATA:/opt/mxe/usr/i686-w64-mingw32.static/qt5
QT_HOST_BINS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/bin
QT_HOST_LIBS:/opt/mxe/usr/i686-w64-mingw32.static/qt5/lib
QMAKE_SPEC:linux-g++
QMAKE_XSPEC:win32-g++
QMAKE_VERSION:3.1
QT_VERSION:5.11.1

可以，但是

    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>

不会。为什么呢我该如何解决？

以下是有关Hero图像的CSS链接：

<div>
    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>
</div>

Answer 1

第二个示例不起作用的原因是，您尚未指定第一个div（包裹#hero div的div）的高度。因此，只需将以下规则添加到CSS：

body div {
  height: 100%;
}

百分比高度将高度定义为包含块的高度的百分比（请参见MDN article about height和MDN article about percentage）。 #home的高度设置为100％，但其包含的块未指定高度。另一方面，在第一个示例中，#home的包含元素是body，其高度指定为100％。

Answer 2

我认为这是因为外部<div>标签将其全部包裹在其中。自然地，<div>不会占据整个主体的宽度。下面是一个示例片段。在边框上，我们可以看到它没有占据主体的整个宽度。为什么需要将工作解决方案包装在额外的<div>中？

body {
  background-color: red;
}

div {
  border: 5px solid blue;
}

<html>
  <body>
    <div>
        Some Text
    </div>
  </body>
</html>

第二个代码段显示更改，并添加等于0的边距和填充，这将删除页面周围的空白

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  padding: 0;
}

#outerDiv {
  height: 100%;
  width: 100%;
  border: 5px solid blue;
}

#home {
  background: url(../img/qualite_01.jpg) no-repeat center center fixed;
  color: #f6f8f8;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

<div id="outerDiv">
    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>
</div>

将英雄图像插入部分

2 个答案: