背景圖像佔用整個屏幕

我已經完成了我的研究，我似乎無法得到任何工作。這裏是我的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>

我的圖像顯示出來，但它不是全屏。它也切斷了一點點。所以我需要圖像佔用整個屏幕，不重複，也不會丟失圖像中的任何東西。任何人都可以幫我解決這個問題嗎？

來源

2016-09-23 Austin Hunter

哪來的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>

請點擊整版按鈕

來源

2016-09-23 21:29:46 Daniel

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

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

<img>

來源

2016-09-23 19:16:17 guest271314

如果目標是設置（或模仿）全屏幕背景圖像，那麼我認爲您需要在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

來源

2016-09-23 19:18:50 praguan

背景圖像佔用整個屏幕

回答

相關問題