Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue?
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;
}