Question

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

样式表中的CSS

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

HTML：

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

Answer 1

在此处无法添加100％的宽度/高度，因为元素的父级没有静态尺寸。

使用100vh和100vw代替高度/宽度：100％。

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>

Answer 2

您需要定义图像应位于的空间

Fiddle example here

.main-image{
    height: 500px;
    width: 100%; /* responsive */
    background-image: url('https://www.prestigeanimalhospital.com/sites/default/files/08-cat-cancer-4.jpeg');
    background-size: cover;
    background-position: 100% 50%;
}

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

您可以控制background-position: 100% 50%;

显示的内容

100％是X-水平值。

50％是Y-垂直值。

或者使用background-position-x和background-position-y

在引导程序中使用背景图像

2 个答案: