Css 从容器div中传出的文本

css代码：

    #overlay {
        background: rgba(0,0,0,0.8);
        position: absolute;
        z-index:100;
        width: 100%;
        color:#fff;
        height: 100%;
    }

html代码：

    <div class="container" style="border:1px solid #000;">
    <div class="row">
        <div class="col-md-12">
             <div id="overlay">Overlay</div>
                    Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. 
             </div>
        </div>
    </div>

覆盖层
下面是该公司的简要介绍，该公司在几乎整个品牌中都打上了自己的宗教标志，现在全世界都知道了。下面是该公司的简要介绍，该公司在几乎整个品牌中都打上了自己的宗教标志，现在全世界都知道了。下面是该公司的简要介绍，该公司在几乎整个品牌中都打上了自己的宗教标志，现在全世界都知道了。

---

由于某些原因，我无法在容器中显示背景叠加。查看演示：

只需添加

top:0和
左：0定位到CSS：

#overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    z-index:100;
    width: 100%;
    color:#fff;
    height: 100%;
    top:0;
    left:0;
}

根据您的评论更新：

向覆盖层添加填充的一种方法是使用使覆盖层30px小于100%，然后添加15px的左边距使其居中：

#overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    z-index:100;
    width:calc(100% - 30px);
    color:#fff;
    height: 100%;
    top:0;
    left:0;
    margin-left:15px;
}

添加
左侧：0到你的css？我不知道问题出在哪里，但我在叠加背景前看到了一个缺口谢谢。如果我只想在文本上而不是整个容器上显示覆盖图，你知道我应该怎么做吗？谢谢。我希望看到边框和文本之间的空白，而不是整个容器的背景。你知道怎么做吗？我试着添加填充物，但没用。太棒了。不知道宽度：计算函数！！已标记正确答案：）