Question

我想将背景图片设置为角4合作者的整页。我有＆＃34;主要＆＃34;我的app组件中的组件。现在我想设置全宽和高度页面的背景图像。我的main.component.html是他

＆＃13;

.bgimg {
    background-image: url('https://dummyimage.com/250/ffcc00');
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: green;
    font-family: "Courier New", Courier, monospace;
    font-size: 25px;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

＆＃13;

 <div class="bgimg"></div>

＆＃13;

图片未显示。但是当我设置宽度和高度（以像素为单位）时，它会显示图片。仅当我以％为单位设置高度和宽度值时，它才会显示图像。我该怎么办呢？

Answer 1

那是因为你的父母标签没有占据整个页面。

html,
body {
  height: 100%;
  width: 100%
}

现在，如果您检查代码，则所有块标记都应占用整个页面。如果没有，请用size-maxer类

包围它们

.size-maxer > * {
  height: 100%;
  width: 100%;
}

Answer 2

body {
  margin:0;
  padding:0;
}

并且还删除了bgimg类中的代码以下它是无用的

color: green;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
margin: 0;
padding: 0;

Answer 3

你的“div”里面什么都没有。所以，它的大小是0px和0px。背景图像被添加到大小为0的元素中。 0的100％是0。这就是为什么％中的设置没有进行任何更改。

尝试更改位置：相对于位置：绝对

以％为单位设置尺寸时不显示背景图像

3 个答案: