时间戳

首页 > 解决方案 > 将背景图像与引导程序一起使用

css - 将背景图像与引导程序一起使用

问题描述

我正在尝试使用我自己的 css 样式表和引导程序来解决问题。我试图在我的索引页面上将图像设置为背景图像，但似乎可以显示它。

我的样式表中的 CSS：

.main-image{
    background-image: url(img/studio.png);
    height:100%;
    width: 100%;
}

HTML：

<section class="row main-image"></section>

标签： csstwitter-bootstrap

解决方案

添加 100% 宽度/高度在这里不起作用，因为元素的父级没有静态尺寸。

不要使用 height/width: 100%，而是使用 100vh 和 100vw。

  • 1vh - 相对于视口高度的 1%。
  • 1vw - 相对于视口宽度的 1%。

所以你的代码必须是：

body { margin: 0 } /* Removed the default body margin */

.main-image{
    height: 100vh;
    width: 100vw;
    background-image: url('http://www.superedo.net/wallpapers/wallpapers/Android%20Tablet/Huawei%20Mediapad%2010%20Fhd/huawei_mediapad_10_fhd_005.jpg');
    background-size: cover;
}
<section class="row main-image">
   <!-- -->
</section>

推荐阅读