Question

我试图找到如何在文本和背景图像的顶部下方放置一块颜色，以便文本不会与背景图像混合。我无法找到如何做到这一点。任何帮助都会受到极大的重视。

这里是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);
}

Answer 2

如果您希望背景颜色跟随文本行，则将p标记切换为span标记，而不是内联显示。

如何在文本下面放置一个块

2 个答案: