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

【问题标题】：opacity change in paragraph changes text opacity and background opacity段落中的不透明度更改更改文本不透明度和背景不透明度
【发布时间】：2013-03-04 23:41:47
【问题描述】：

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

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

【问题讨论】：

我也无法在页面中居中文本
你的问题解决了吗？

标签： html css opacity

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

DEMO

使用 css 对齐文本

text-align:center;

TEXT CENTER ALIGN DEMO

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

Opacity 倾向于级联到子元素，即如果你将一个 div 的 opacity 设置为 0.5，它的所有子元素都会有相同的 opacity，所以使用 background-color 属性来改变背景颜色和 opacity。

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

display: table-cell; ?

你也可以替换

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

通过

margin: 0 auto;

水平居中。

如果您希望它位于页面中间，请按照以下说明操作：Vertically center element

【讨论】：