Make background transperent and text not

Question

Using opacity I made my whole div transparent but I want to mantain the font normal without opacity. I am unable to set a separate class or id to the content since it is dynamically created. I also cannot use the following: background: rgba();

{opacity : '0.3'}

Any suggestions?

possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Roko C. Buljan, Apr 29 '14 at 07:14
Any reason you cannot use `background: rgba();` ? Perhaps you can use something more specific like `background-color`. — Roko C. Buljan, Apr 29 '14 at 07:15
What about creating transparent image `1px` x `1px` and setting it as a background , background-image ? Also post the relevant `HTML`. — W.D., Apr 29 '14 at 07:23

user3568872 · Answer 1 · 2014-04-29T09:04:06.473

1

For this you need to add a background image Transparent background.

then on that image when you add the content it will show up with opacity of 100%.

see this Opacity ,RGBA

edited Apr 29 '14 at 09:04

answered Apr 29 '14 at 07:31

user3568872

21
3

score 0 · Answer 2 · answered Apr 29 '14 at 07:12

0

Use rgba pattern

P{
   color:#fff;
    display:block;
    background: rgba(0,0,0,0.60);
}

DEMO

answered Apr 29 '14 at 07:12

Sowmya

26,684
21
96
136

If he made the `DIV` container `opacity: 0.3;` your example will be of no help as it targets `p` – Roko C. Buljan Apr 29 '14 at 07:19
You might want to add `background: rgb(0,0,0,0.60);` as a fallback for older browsers. Add it before the `rgba` rule. Otherwise they won't have a bg color at all. – GreyRoofPigeon Apr 29 '14 at 07:41

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

If you cannot use background: rgba() the other work around is to use two separate containers, one for the background and the other for text. Refer here https://stackoverflow.com/a/5135431/2965281

edited May 23 '17 at 10:32

Community

1
1

answered Apr 29 '14 at 07:16

raghav

285
2
12

Sorry as I said I cannot use any selector since my page is generated. – Jacob Apr 29 '14 at 07:21
Then, you can try using inline styles in your generator – raghav Apr 29 '14 at 09:32

score 0 · Answer 4 · answered Apr 29 '14 at 08:27

You can do this with both

background-color: rgba(0,0,0,0.3) /* rgb for (0,0,0) is black; opacity of 0.3 */

or

background-color: hsla(0,0%,0%,0.3) /* same */

The "a" stands for alpha channel.

There is one problem: It doesn't work with all browsers, unfortunately.

Here is an example: http://jsfiddle.net/TGL45/

To learn more:

http://css-tricks.com/yay-for-hsla/

http://css-tricks.com/rgba-browser-support/

Pradeep Pansari · Answer 5 · 2014-04-29T07:22:16.590

-1

Use RGBA format for background color. You can try below code for background opacity:

Working demo

background:rgba(0, 0, 0, .6);

edited Apr 29 '14 at 07:22

answered Apr 29 '14 at 07:13

Pradeep Pansari

1,287
6
10

Make background transperent and text not

5 Answers5