html - 主页中的背景图像不起作用?

标签 html css angular bootstrap-4

当我将该选项设置为 100% 时,背景图像不起作用。

That's what i got as a result

我正在使用 angular 和 bootstrap 4。

<!--html code-->
<div class="bg">
<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<router-outlet></router-outlet>

这是.scss代码

body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("~/assets/jonatan-pie-226805-unsplash.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

最佳答案

我复制了您的代码并添加了一张图片,效果如下。

您是否使用了任何可以隐式地保持背景较小的东西?也许是 Bootstrap ?

body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("https://www.placecage.com/g/1000/500");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!--html code-->
<div class="bg">
<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<router-outlet></router-outlet>

关于html - 主页中的背景图像不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55910217/

相关文章:

css - 类似今日美国的 iPad 多页分栏布局

css - 如何在 mvc razor 中对齐编辑器的文本框?

javascript - Angular 2 如何使用驼峰命名法处理属性

html - 如何创建具有不同圆环颜色的有序列表

angular - 如何在 Angular 数据类型上使用 ngSwitch?

css - 向 Angular Material 工具提示箭头添加阴影

iphone - 带有本地镜像文件的 iOS WebView 远程 html

html - 添加/删除组件时某些 div 的 Flexbox 对齐方式 'issues'

javascript - 单击时如何使某些元素突出显示?

html - 如何在这个例子中内联显示 div