CODEWITHSUNDEEP
htmlcssopacity
Mike George
Mike George

Reputation: 521

When Using Opacity With CSS How Can I Make The Background Transparent But Not The Text?

Basically I have a div that I want the background to be transparent.

<div id="modSideTop"><div id="modSideTopText">This Text Must Not Be Transparent</div></div>

The modSideTop div has a background image attached via css. What would the rest of the css that I need be to keep the text normal and the background transparent?

Thanks in Advance for your help!

Upvotes: 0

Views: 1712

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7778

Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the CSS basically you have to use the rgb color in background & alpa for opacity.

background:rgba(146,146,146,0.1);

or see the example:- http://jsfiddle.net/8LFLd/3/

Upvotes: 0

icktoofay
icktoofay

Reputation: 128991

Use an rgba color for the background rather than using opacity. For example, 50% translucent black:

background: rgba(0, 0, 0, 0.5);

Try it on JSFiddle.

Upvotes: 3

Related Questions