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

时间:2017-12-15 11:35:07

标签: css angular background

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



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

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

 
&#13;
&#13;
&#13;

图片未显示。但是当我设置宽度和高度(以像素为单位)时,它会显示图片。仅当我以%为单位设置高度和宽度值时,它才会显示图像。我该怎么办呢?

3 个答案:

答案 0 :(得分:0)

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

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

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

包围它们
.size-maxer > * {
  height: 100%;
  width: 100%;
}

答案 1 :(得分:0)

body {
  margin:0;
  padding:0;
}
  

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

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

答案 2 :(得分:0)

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

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