段落中的不透明度變化改變了文本的不透明度和背景不透明度

每當我嘗試更改段落的不透明度時，它會更改文本和背景的不透明度，我想更改的只是文本的背景，我將如何修復這個？段落中的不透明度變化改變了文本的不透明度和背景不透明度

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

來源

2013-03-16 Adam Ginther

我也不能中心我的文字中 – 2013-03-16 06:29:24

頁面是你的問題解決了嗎？ – 2013-03-18 06:12:16

更改您的#introtext的背景顏色的Alpha值：

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

來源

2013-03-16 06:35:47 Nikhar

使用rgba()指定一個半透明的背景顏色，而不是將其應用於一切。

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

來源

2013-03-16 06:36:09

試試這個CSS它將改變不透明度到段落的背景不文本

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

DEMO

用於對齊文本使用CSS

text-align:center;

TEXT CENTER ALIGN DEMO

來源

2013-03-16 06:37:08

不透明度傾向於級聯到子元素，即如果將div的不透明度設置爲0.5，則其所有子元素都將具有相同的不透明度，因此請使用background-color屬性更改背景顏色和不透明度。

您的文本居中問題是因爲您使用的樣式。任何理由使用

display: table-cell; ?

您還可以通過

margin: 0 auto;

更換

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

水平居中它。

如果你想在頁面的中間，按照此：Vertically center element

來源

2013-03-16 06:47:18

段落中的不透明度變化改變了文本的不透明度和背景不透明度

回答

相關問題