How to make a post background semi-transparent without making the content transparent?

Question

I've looked at tons of posts pertaining to my problem and nobody really has the same html so I can't really figure it out.

I'm trying to make my tumblr blog's post background semi-transparent without making the photos, videos, text, etc. on the post transparent. Right now I have

   #left-column .post {
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    padding-top: 20px;
    width: 520px;
    }

I'm sure I need to supply more code for this question. If you have any requests I'll copy/paste over to here. Also, I only know the basics to html/css so if I don't understand something right away, I'll have a question or two. Thanks.

Check this link may be you it will help you , http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text?rq=1 — user2582303, Jul 30 '13 at 05:42

score 2 · Answer 1 · answered Jul 30 '13 at 04:52

2

Use RGBa (Red Green Blue Alpha)

background-color: rgba(255,255,255,0.5);

So your code would be

#left-column .post {
    z-index: -1;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    padding-top: 20px;
    width: 520px;
}

answered Jul 30 '13 at 04:52

doitlikejustin

6,293
2
40
68

To my blog? haha I'll fork over my html but not my blog – user2632633 Jul 30 '13 at 04:59
Then I guess you are out of luck if we cannot see the page in action – doitlikejustin Jul 30 '13 at 05:01
I'm working on it right now and it looks like a mess but here it is I GUESS http://leiomano.tumblr.com/ – user2632633 Jul 30 '13 at 05:06
Maybe you are on an older browser? I see it working on my browser http://d.pr/i/zVAG – doitlikejustin Jul 30 '13 at 05:08
actually I reverted back to the old settings but it is obvious that it changes not only the post background if I change it to ~0.8 opacity – user2632633 Jul 30 '13 at 05:10
It still works with the rgba code http://d.pr/i/11Mx and look at the bottom right of this http://d.pr/i/F4Os – doitlikejustin Jul 30 '13 at 05:12
My browser is up-to-date and I have another question.... maybe I'll make another question on here – user2632633 Jul 30 '13 at 05:19
I am not sure why you are not seeing the background change then. The code on my end works fine. – doitlikejustin Jul 30 '13 at 05:32
You've been very helpful and I'd appreciate it if you helped me on my other question :) http://stackoverflow.com/questions/17938908/how-to-prevent-the-overflow-of-an-image-from-a-tumblr-post – user2632633 Jul 30 '13 at 05:35

Mihai Viteazu · Answer 2 · 2013-07-30T05:50:11.583

0

you can use this website http://hex2rgba.devoth.com/ to make your background how you need it how transparent to be and what color

try this code:

#left-column .post {
 background: rgba(255, 255, 255, 0.5);
 border: 1px solid #ccc;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 float: left;
 padding-top: 20px;
 width: 520px;
}

rgba(255, 255, 255, 0.5) = #FFF

edited Jul 30 '13 at 05:50

answered Jul 30 '13 at 05:15

Mihai Viteazu

1,631
3
13
15

thank you but this is pretty much what the other guy told me to do and it doesn't really work – user2632633 Jul 30 '13 at 05:27

How to make a post background semi-transparent without making the content transparent?

2 Answers2