使用Bootstrap

Question

我是网络开发的新手，正在使用Angular和Bootstrap开发练习项目。我想要一个标题组件，在我的app.component我调用标头组件。现在在app.component中，我想要一个覆盖屏幕大约50％的背景图像，包​​括标题。我试过实现这个，但不知何故它似乎是错误的。我面临几个问题。

1）当我向下滚动时，它看起来很奇怪，看起来好像页面底部位于图像顶部。

2）图像未完整显示。这是我的图像，如果你查看我的实现，整个图像都不会显示。

以下是My work的Stack blitz链接。

请全屏查看演示：Demo Url

Answer 1

如果我理解正确，那么css（ app.component.css ）在2条规则中存在问题：

background-attachment: fixed;

  

确定图像的位置是否在视口中固定，或者与其包含的块一起滚动。

^{https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment}

所以我删除了它。

另外：

background-size: 100% 100%;

将图像拉伸到全宽/高度。在你的情况下，我想你想要它只需要全宽，所以这样做的方法是：

background-size: 100% auto;

结果是：

https://stackblitz.com/edit/angular-rbtcs9?file=src/app/app.component.css

如果您正在寻找，请告诉我。