背景图像占用整个屏幕

Background Image to take up the entire screen

本文关键字：屏幕 图像 背景      更新时间：2023-09-26

我已经做了我的研究，我似乎不能得到任何工作。这是我的html:

<body ng-app="starter">
    <ion-pane>
    <head>
    </head>
      <ion-content>
      		<body>
      			<img src="resources/img.png">
      		</body>
      </ion-content>
    </ion-pane>
</body>

我的图像显示，但它不是全屏。它也被截断了一点。所以我需要图像占据整个屏幕，没有重复，也没有图像中的任何损失。有谁能帮我把这个弄好吗?

这是呈现后的HTML，还是来自您的编辑器?

  • 如果您能向我们展示您的应用程序页面的打印屏幕，以及您的HTML 被浏览器渲染后的，我们将不胜感激!

    -这个应用程序只是运行在某种固定的分辨率/屏幕?如果不是，我不认为有一个裁剪图像只是脚你的屏幕是一个很好的解决方案，因为有许多其他屏幕与不同的分辨率在那里，如果你想要一个背景覆盖所有的，那么它肯定会在某些分辨率/屏幕裁剪。

考虑到这一点，你有几个选项来创建任何类型的屏幕/分辨率的全尺寸背景。

你可以创建一个居中的背景，将始终脚在特定的屏幕，无论它是多么大或多么小的图像，只有两个CSS规则:

.app-background {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
    z-index: -1;
}
.app-background > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

。app-background将是背景的包装器，并且将有:

- position: fixed;以便在父元素之一具有水平/垂直滚动条的情况下保持其位置，并且也不占用用于页面内容的空间;

- top/left: -50%;将其居中并使其大小为其父/屏幕的两倍;(现在你的图像有了可以居中的父元素);

- overflow: hidden;只是为了裁剪里面的图像，并确保页面的内容不会被隐藏在背景后面;

。app-background> img将是作为背景的图像，将有:

- position: absolute;顶端/底/左/右:0;使图像在.app-background;

- min-width/min-height: 50%防止图像小于容器分辨率/屏幕尺寸的100%。

概念(全屏查看)

html, body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}
.app-background {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  overflow: hidden;
  z-index: -1;
}
.app-background > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
/* Instructions below this comment are NOT needed for the solution */
body {
  font-family: Calibri, Arial;
  text-align: center;  
}
body:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: -0.25em;
}
*, .border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.app-container {
  position: relative;
  border: 2px solid red;
  color: red;
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  height: 40%;
}
.app-background {
  position: absolute;
  border: 2px solid purple;
  color: purple;
}
.app-container:before,
.app-background:before {
  content: '.app-background';
  font-size: 25px;
  display: block;
  padding-bottom: 10px;
}
.app-container:before {
  content: '.app-container';
}
.app-background > img {
  opacity: 0.5;
  z-index: -1;
}
<div class="app-container">
  <b>This red box is what you will see in your screen.</b>
  
  <div class="app-background">
    This purple box is where your image will be centered and cropped.
    
    <img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
    
    <b>Feel free to zoom-in/out your browser to see the effect from different resolutions!</b>
  </div>
</div>

请点击全页按钮

解决方案(全屏查看)

html, body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}
body > ion-pane,
body > ion-pane > ion-content {
  width: 100%;
  height: 100%;
}
.app-background {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  overflow: hidden;
  z-index: -1;
}
.app-background > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
<body ng-app="starter">
  <ion-pane>
    <head>
    </head>
    <ion-content>
      <body>
        <div class="app-background">
          <img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
        </div>
      </body>
    </ion-content>
  </ion-pane>
</body>

请点击全页按钮

开始:

复制此代码&包括在你的项目中，这将工作:

html { 
  background: url(resources/img.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这里是view DEMO:这里输入链接描述

您可以使用css设置img或其他元素width为100vw, height为100vh 

img {
  background: sienna;
  width: 100vw;
  height: 100vh;
}
<img>

相关文章：