Question

我有一个800x480像素的背景图像。当我的元素具有固定大小时，我会看到背景图像，但是当元素具有相对大小或最大宽度时。

使用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%;
}

Answer 1

使用以下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的问题，但这在很大程度上取决于您如何将此应用到您的网站/应用程序/其他方面。

Answer 2

您必须将position:absolute中的.settings-container更改为position:relative，因为在这种情况下，您的图片充当Child的{{1}}，图片应为据其父母说。因此.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;
}

CSS：元素的相对大小使背景图像消失

2 个答案: