CSS：元素的相對大小使背景圖像消失

我有一個800x480像素的背景圖像。當我的元素具有固定的大小時，我會看到背景圖像，但不是元素具有相對大小或最大寬度時。CSS：元素的相對大小使背景圖像消失

工作CSS腳本

.audio-container, .settings-container { 
    max-width:800px; 
    height:480px; 
    position:absolute; 
    background-image:url("../../public/images/Audio/I_Audio_BGK.png"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}

CSS與沒有顯示出背景圖片腳本

.audio-container, .settings-container { 
    width:100%; 
    /* Same result with max-width */ 
    height:100%; 
    position:absolute; 
    background-image:url("../../public/images/Audio/I_Audio_BGK.png"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}

我能做些什麼來顯示背景圖片尚未有該元素尺寸相對於瀏覽器窗口？

按要求，這裏有父母的DIV

<div ng-controller="MainController" class="main-guy"> 
    <div class="screen-inside"> 
     <div class="audio-container" ng-controller="AudioController"> 
     </div> 
    </div> 
</div>

這裏是父DIV + CSS樣式

.main-guy { 
    position:absolute; 
/* Same result if width and height are set to a fixed number */ 
    width: 100%; 
    height: 100%; 
    margin: auto; 
} 
.screen-inside { 
    margin:auto; 
    position:relative; 
    height:60%; 
    width:66.66%; 
}

來源

2016-06-28 Les Paul

請附上您的HTML代碼，以幫助證明這個問題。在你的第二個（非工作）例子中，哪一個祖先決定寬度/高度？即什麼是100％？ – showdev

將'position：absolute'改爲'position：relative'它會起作用。 –

@ M.Tanzil謹慎解釋原因？ – showdev

你必須在.settings-container的position:absolute更改爲position:relative爲你的形象在這種情況下充當Child爲.settings-container和圖像應根據其父。所以Position:absolute將無法正常工作。

檢查片段

.main-guy { 
 
    position:absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    background:#999; 
 
} 
 
.screen-inside { 
 
    margin:auto; 
 
    position:relative; 
 
    height:60%; 
 
    width:66.66%; 
 
    background-color:blue; 
 
} 
 

 
.audio-container, .settings-container { 
 
    width:100%; 
 
    /* Same result with max-width */ 
 
    height:100%; 
 
    background-image:url(http://reservations.life/css/images/bg-01.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position:absolute; 
 
}

<div ng-controller="MainController" class="main-guy"> 
 
    <div class="screen-inside"> 
 
     <div class="audio-container" ng-controller="AudioController"> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-06-28 22:29:49

使用下面的HTML：

<div class="settings-container"></div>

用下面的CSS：

html, body { height: 100%; margin: 0; padding: 0; } 

.settings-container { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    background-image: URL("your-image-here"); 
    background-repeat: no-repeat; 
    background-size: cover; 
}

背景佔用視口寬度和高度的100％。很難正確地解決你的問題而不能看到整個圖像，但我的猜測是你需要在文檔的其他地方應用height。

您也可能會遇到使用position: absolute的問題，但這在很大程度上取決於您如何將其應用於您的網站/應用程序/無論如何。

來源

2016-06-28 22:16:26

CSS：元素的相對大小使背景圖像消失

回答

相關問題