如何在 angular 4 组件中设置响应式背景图像
[英]How to set a responsive background image in angular 4 component
问题描述
my question is very simple, I am developing an angular 4 app, and I need to place an image as a background in my component called Home, that occupies the entire browser window ONLY in my Home component... Below shows the structure of my application:
我的问题很简单，我正在开发一个 angular 4 应用程序，我需要在名为 Home 的组件中放置一个图像作为背景，它仅在我的 Home 组件中占据整个浏览器窗口......下面显示了我的结构应用：
index.html:索引.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: app.component.html：
<router-outlet></router-outlet>
app.component.ts: 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: home.component.html：
<div class="background">
<p>Example</p>
</div>
home.component.css: home.component.css：
.background {
width: 100%;
background: url('../../assets/background.jpg') no-repeat;
background-size: cover;
color: white;
text-align: center;
}
As you can see, what I need is that when rendering my home component, it shows as a background of my home component an image that occupies the entire browser window, the problem is that as I have tried ... the image does not take up the full screen of the browser, the image only occupies the background of the example sentence, and it is not responsive either.如您所见，我需要的是，在渲染我的 home 组件时，它会显示一个占据整个浏览器窗口的图像作为我的 home 组件的背景，问题是，正如我所尝试的...浏览器全屏，图片只占据例句的背景，也没有响应。
Many thanks!非常感谢！
3 个解决方案
解决方案1
3 已采纳 2018-11-08 03:38:24
Ive made a working stackblitz of your issue我已经对您的问题进行了有效的stackblitz
https://stackblitz.com/edit/angular-hnxds3?file=src%2Fapp%2Fapp.component.html https://stackblitz.com/edit/angular-hnxds3?file=src%2Fapp%2Fapp.component.html
you need to have your background css like this你需要有这样的背景css
.background {
width: 100%;
height: 100vh;
background: url('../../assets/background.jpg') no-repeat;
background-size: cover;
color: white;
text-align: center;
}
Here is a photo of it working, the white border around it is the default html padding/margin you will need to use something like normalize.css to remove it once you have done that the white border will go away and you will have an image that fills the whole screen这是它工作的照片，它周围的白色边框是默认的 html 填充/边距，你需要使用像 normalize.css 这样的东西来删除它，一旦你完成白色边框就会消失，你就会有一个图像填满整个屏幕
解决方案2
3 2020-06-11 05:53:32
I had the same issue but some times my content exceeded the heigth: 100vh so that exceeded content didn't had the background.我遇到了同样的问题，但有时我的内容超过了heigth: 100vh因此超出的内容没有背景。 This worked for me这对我有用
.background-img {
min-height: 100vh;
background: url('...');
background-size: cover;
width: 100%;
text-align: center;
}
解决方案3
1 2020-01-14 07:22:44
This is in response to the previous answer suggesting to add a div spanning 100% of the width and height (I dont have enough points to add it as a comment to the answer itself) ..这是对上一个答案的回应，建议添加一个跨越 100% 宽度和高度的 div （我没有足够的点数将其添加为答案本身的评论） ..
The solution is almost perfect except for the white borders on all 4 corners.除了所有 4 个角上的白色边框外，该解决方案几乎是完美的。
Add the following to the index.html to remove the edges.将以下内容添加到 index.html 以删除边缘。 The image will then be displayed wall-to-wall:然后图像将被逐墙显示：
you can test it out in the same stackblitz link provided in the answer您可以在答案中提供的同一个 stackblitz 链接中对其进行测试
<body style="background-color:black;padding:0px; margin:0px;">
<my-app>loading</my-app>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.