背景图像占用整个屏幕

问题描述：

我已经完成了我的研究，我似乎无法得到任何工作。这里是我的html：背景图像占用整个屏幕

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

我的图像显示出来，但它不是全屏。它也切断了一点点。所以我需要图像占用整个屏幕，不重复，也不会丢失图像中的任何东西。任何人都可以帮我解决这个问题吗？

哪来的CSS？ – StackOverMySoul

这不是一个背景图像... – DaniP

答

这是在渲染之后的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-背景将是背景的包装并且将具有：

- 位置是：固定;为了保持其位置，在父元素之一具有水平/垂直滚动条的情况下，并且也不消耗用于页面内容的空间;

- top/left：-50％;宽度/高度：200％;居中并使其成为其父/屏幕大小的两倍; （现在你的图片有父母，可以居中）;

- overflow：hidden; z-index：-1;只是裁剪内部的图像，并确保页面的内容不会隐藏在背景后面;

。应用程序背景> IMG将图像作为背景，将有：

- 位置：绝对;上/右/下/左：0;保证金：汽车;将图片在水平和垂直方向居中放置在.app-background;

- 最小宽度/最小高度：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>

请点击整版按钮

的SOLUT离子（在全屏观看）

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>

请点击整版按钮

答

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

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

<img>

如果目标是设置（或模仿）全屏幕背景图像，那么我认为您需要在img元素上设置一些位置。 – JonSG

@JonSG答案的要点是将宽度设置为100vw，将height设置为100vh。可能需要定位。注意，效果也可以在'css''：before'或'：after'伪元素上渲染 – guest271314

当然，这样做的窍门是将图像设置为全屏显示，我同意这是特定的最终请求。但是，我的假设（给出了关于背景图像的问题）是，海报可能会在“前景”中放置页面的其他元素。您是否建议将每个“前景”项目放在绝对位置而不是单个背景？为了说明我的观点，在你的** img **元素后面添加一个** p **元素和一些随机文本。你认为海报希望会发生什么？ – JonSG

答

这里，我们去：

复制该代码&包括在您的项目，这将工作：

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; 
}

这里是观看演示：enter link description here

背景图像占用整个屏幕

相关推荐