段落中的不透明度更改会改变文字和背景的不透明度。

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;
          }

- user1896446

---

我也无法将我的文本居中在页面上。 - user1896446

Answer 1

改变#introtext背景颜色的alpha值：

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

- Nikhar

Answer 2

尝试这个CSS，它将改变段落背景的不透明度而不是文本。

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

DEMO

使用CSS对齐文本

text-align:center;

文本居中对齐演示

- Thirumalai murugan

Answer 3

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

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

- Austin Brunkhorst

Answer 4

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

---

你的文本居中问题是由于你使用的样式造成的。有使用这种样式的原因吗？

display: table-cell; ?

您也可以替换

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

通过

margin: 0 auto;

使其水平居中。

如果您想将其放置在页面中央，请按照以下步骤操作：垂直居中元素

- Vimal Stan