5

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

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

4 回答 4

3

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

background-color: rgba(0, 0, 0, 0.1);
于 2013-03-16T06:35:47.953 回答
1

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

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

演示

用于对齐文本使用 css

text-align:center;

文本中心对齐演示

于 2013-03-16T06:37:08.187 回答
0

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

/* black, 50% opacity */
background-color: rgba(0, 0, 0, .5);
于 2013-03-16T06:36:09.407 回答
0

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

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

display: table-cell; ?

你也可以换

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

经过

margin: 0 auto;

使其水平居中。

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

于 2013-03-16T06:47:18.043 回答