Question

我有一个名为#main的div。当我使用angularjs时，这个div包含多个html页面的内容。我尝试了很多css的东西来将这个部分集中在我的html页面中。

这是html部分的CSS：

html {
    height: 100%;
    width: 100%;
    padding: 50px;
    background-image: url("../images/whatever.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 1;
}

现在这里是div的样式：

#main {
    width: 100%;
    height: calc(100vh - 100px);
    display: block;
    /*position: absolute;*/
    position: relative;
    color: white;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 25px;
}

但没有不透明度，它只是一种丑陋的灰色。经过一些研究后，我读到了一些关于定位div 绝对的内容。我尝试使用position: absolute;代替position: relative;，但它确实有效。不透明度是 - 为什么？

有没有一种方法可以将div置于相对位置？宽度上的calc（）可能是什么？。

由于

编辑：显然这可行：width: calc(100vw - 100px);结合绝对定位，但我仍然不明白为什么背景颜色与定位有关。

相对定位后，div的背景保持白色

0 个答案: