gpt4 book ai didi

html - 如何在 Angular 4 组件中设置响应式背景图像

转载 作者:行者123 更新时间:2023-11-28 14:38:37 24 4
gpt4 key购买 nike

我的问题很简单,我正在开发一个 angular 4 应用程序,我需要在名为 Home 的组件中放置一个图像作为背景,它仅在我的 Home 中占据整个浏览器窗口成分...下面显示了我的应用程序的结构:

index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyAngularApp</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

app.component.html:

<router-outlet></router-outlet>

app.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

home.component.html:

<div class="background">
<p>Example</p>
</div>

home.component.css:

.background {
width: 100%;
background: url('../../assets/background.jpg') no-repeat;
background-size: cover;
color: white;
text-align: center;
}

如您所见,我需要的是在渲染我的主页组件时,它显示一个占据整个浏览器窗口的图像作为我的主页组件的背景,问题是我已经尝试过......图像不占浏览器全屏,图片只占例句背景,也没有响应式。

非常感谢!

最佳答案

我遇到了同样的问题,但有时我的内容超出了 height: 100vh,因此超出的内容没有背景。这对我有用

.background-img {
min-height: 100vh;
background: url('...');
background-size: cover;
width: 100%;
text-align: center;
}

关于html - 如何在 Angular 4 组件中设置响应式背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53200987/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com