How to set the font background with opacity but not the text inside it

Question

I want to use background-color of the body and to apply it to the font background but with opacity 0.1

So the html is something like this

<font class="addFav">Add to Fav {num of all favs}</font>

I get the body BGcolor let say #f7f7f7 and in the tag of the page is

.addFav{background-color:#f7f7f7;}

And in .css file i set the color to #333;

font.addFav{color:#333;}

I thought of useing two divs, but the problem is that the text inside the font is dinamic

duplicate: http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text — Mr Lister, Mar 17 '12 at 07:28
I saw that but dosent work since how i said "i get the bgcolor of the body" and that color is dinamic,because the users will make there own themes so i cant set it by default — Ben, Mar 17 '12 at 07:34
Then I'm not sure I understand. You have a page background of #F7F7F7, and you want to display an element (never mind that it's ``, but we'll get back to that later) with the same background color? Why not simply use a transparent background color for the element? — Mr Lister, Mar 17 '12 at 07:39

score 2 · Answer 1 · answered Mar 17 '12 at 10:24

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/

Kishore Kumar · Accepted Answer · 2012-03-17T09:12:53.290

0

 .addFav
    {
        /* Fallback for web browsers that don't support RGBa */
        background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */
        background-color: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

        opacity:0.6; /* this will work if your browser supports css3*/
    }

edited Mar 17 '12 at 09:12

answered Mar 17 '12 at 07:31

Kishore Kumar

12,675
27
97
154

it dosent work :( , since the background color of the body is dinamic,i mean the users will make there own themes and i want to get that color to use it in the Fav font but to make it brighter – Ben Mar 17 '12 at 07:37
But using the exact same color won't help. If you want to make it brighter, you'll have to use Javascript to retrieve the background color, change it into something brighter and then use the result for the ``. Or, use #FFFFFF with opacity, like `rgba(255,255,255,0.1)`. By the way, an opacity of 0.1 won't make much difference on #F7F7F7. – Mr Lister Mar 17 '12 at 07:41
@KishoreJangid yes opacity will work but i want do color to be the same #333. With js it will be easy but i dont want to use javaScript – Ben Mar 17 '12 at 07:47
1

@MarianPetrov Kishore's example will work if you substitute his `rgba(0, 0, 0, 0.6)` with `rgba(255,255,255,0.1)`. As I said, you will not see any difference on a background color of #F7F7F7. Use a darker one to test with! – Mr Lister Mar 17 '12 at 07:50
then the only way to solve this is either use javascript or css3 – Kishore Kumar Mar 17 '12 at 09:06
use css3 `opacity:0.4;` to make it – Kishore Kumar Mar 17 '12 at 09:09

score -1 · Answer 3 · answered Mar 17 '12 at 07:31

-1

Just use the CSS3 opacity property.

.addFav{background-color:#f7f7f7;opacity:0.1;}

answered Mar 17 '12 at 07:31

justanotherhobbyist

2,124
4
28
38

From the question: "but not the text inside it" – Quentin Mar 17 '12 at 07:35
didnt know it affected the font aswell, then he answers his own question with "thought of useing two divs" – justanotherhobbyist Mar 17 '12 at 08:13

How to set the font background with opacity but not the text inside it

3 Answers3