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;

TEXT CENTER ALIGN DEMO

Answer 3

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

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

Answer 4

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

您的文字居中问题是因为您使用的样式。使用

的任何原因

display: table-cell; ?

您也可以替换

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

通过

margin: 0 auto;

将其水平居中。

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

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

4 个答案: