HTML - 一定宽度的居中透明矩形

Question

我有一个这样的页面 FIDDLE

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }    

有重复的背景图片，但覆盖的文字不是很清晰。

我想在文本后面放置一个矩形(一种颜色或可能 50% 透明 - 可能是另一个小的，半透明的 png 重复？)以便更容易阅读 - 它应该与文本一样宽( 800px)，高度应为 100%。

这可能吗？谢谢。

编辑:为了更清楚，我希望深色(或半透明)层覆盖整个页面，从上到下，所以它在 Logo 后面，也可能在页脚后面，而不仅仅是在哪里正文是

Answer 1

将文本放在带有一些 id 的 div 中，然后将 css 应用于该 div。

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0">
<br>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.
</div>

CSS

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }    

#content{
  background-color: rgba(255, 255, 255, 0.84);
  padding: 10px;
  text-align: justify;
  border-radius: 15px;
}

检查这个Fiddle