5

Whenever I try to change the opacity of the paragraph it changes the opacity of the text and the background, all I want to change is the background of the text, how would I fix this?

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の背景色のアルファ値を変更します。

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;

TEXT CENTER ALIGN DEMO

于 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

不透明度は子要素にカスケードする傾向があります。つまり、div の不透明度を 0.5 に設定すると、そのすべての子要素の不透明度が同じになるため、background-color プロパティを使用して背景色と不透明度を変更します。

テキストのセンタリングの問題は、使用したスタイルが原因です。使用理由は何でも

display: table-cell; ?

交換することもできます

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

に

margin: 0 auto;

水平方向に中央揃えにします。

ページの中央に配置したい場合は、次のようにします: Vertically center element

于 2013-03-16T06:47:18.043 に答える