html - 如何在文本下方放置一个 block

Question

我试图找到如何在文本下方和背景图像上方放置一 block 颜色，以使文本不会与背景图像融为一体。我还不知道该怎么做。非常感谢任何帮助。

这里是style.css

body {
    background-image: url("beach.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

p { color:#000000;line-height:2em;}
p.margin {
    text-align: justify;
}

#banner {position:relative, margin:auto auto;}
#header{background-color: #fff; width: 1000px; position: relative; }
#bannerL {position:relative, margin:auto auto;}
#bannerR {
    position: relative; 
    float: right; 
}

h1 { text-align: center}
h1 {font-size:50px}

Answer 1

您可以简单地将 background-color 属性添加到 p，如下所示:

p {
    background-color: rgba(125, 0, 100, 0.7);
}

或者您可以将所有文本放入一个 div 中，如下所示:

<div class="content">
    All my content
</div>

在你的 CSS 中:

.content {
    background-color: rgba(125, 13, 42, 0.7);
}