关于border的一个小问题

今天偶然在菜鸟教程写一个实例的时候出现一点小问题，还望大佬帮忙解答。
问题描述：
在模仿这个实例：创建一个具有文本的拥有背景图像的透明框，基本了解了怎么做，
然后就开始写，也就是一个盒子里面嵌套了一个盒子，设置外盒子的背景，然后设置内盒子的外边距(margin),宽度等，使盒子居中，设置背景颜色及透明度(Opacity(0–1.0)–该单词汉语:0不透明度)，然后内盒子里放一些文本,写完后运行了一下，与原版有出入，
如：

<div class="top">
        <div class="content">
            <p>
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
            </p>
        </div>
    </div>
    ---------------------------------------------------------------------------------------------