段落中的不透明度更改会更改文本不透明度和背景不透明度

Question

每当我尝试更改段落的不透明度时，它会更改文本和背景的不透明度，我想要更改的是文本的背景，我该如何解决这个问题？

HTML

<div id="opener">
 <p id="introText">
  Adam Ginther is a<class id="blueText"> front-end developer</class> with an interest in responsive & mobile design
 </p>
</div>

CSS

#opener {
        background-image: url('images/background.jpg');
        background-color: #373737;
        height: 800px;
        width: 100%;
        position: fixed;
        }

#introText {
        width: 400px;
        color: white;
        background-color: black;
        text-align: center;
        display: table-cell;
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 50px 80px 50px 80px;
        font-family: 'Fenix', serif;
        font-size: 1em;
           }
#blueText {
        color:#00aeff;
          }

Answer 1

更改#introtext背景颜色的Alpha值：

background-color: rgba(0, 0, 0, 0.1);

Answer 2

试试这个css它会将不透明度改为段落背景而不是文本

p{background: rgba(0,0,0,0.60);}

DEMO

用于对齐文本使用css

text-align:center;

文本中心对齐演示

Answer 3

使用rgba()指定半透明背景颜色，而不是将其应用于所有内容。

/* black, 50% opacity */
background-color: rgba(0, 0, 0, .5);

Answer 4

不透明度倾向于级联到子元素，即，如果将div的不透明度设置为0.5，则其所有子元素将具有相同的不透明度，因此请使用background-color属性更改背景颜色和不透明度。

---

您的文本居中问题是由于您使用的样式。 任何理由使用

display: table-cell; ?

你也可以替换

position: absolute;
top: 50%;
left: 50%;

通过

margin: 0 auto;

使其水平居中。

如果您希望它位于页面中间，请按照下列步骤操作： 垂直居中元素