Mon, 2010-02-08 20:17
Trying to get a nice background behind my text on a website, but it all falls over when I try to make only the background behind the text semi-transparent.
The effect I want is just like the quote in the middle of this site - http://www.upstruct.com/
But. I also want the background behind the text to be a bit see through.
But! The text still needs to be stay fully opaque.
The background behind the text needs to be flexible too. As the text it is behind will change in lengths regularly.
So that counts out having a coloured & semi-transparent div.
So here's what I've got at the moment...
html
<span class="baseline-text-bg"><span class="baseline-text">No really, problems?</span></span>
css
.baseline-text-bg { background-color: white; padding: 3px; opacity: 0.6; filter: alpha(opacity=60); } .baseline-text { font-size: 50%; text-transform: uppercase; }
Now before you say it, yes I recognise the problems with it from the start too. The fact that the text is nested inside the transparent bit.... But this is where I've ended up.
It started with it all being in one little thingy, which works perfectly, like on that site I showed, until I want to progress to making the background also semi-transparent as well as white..
Also. IE8 doesn't seem to make it semi-transparent at all..... sigh
Mon, 2010-02-08 20:19
#1
research RGBA
research RGBA
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Mon, 2010-02-08 23:33
#2
CupidsToejam wrote: research
research RGBA
or semi transparent PNGs
Tue, 2010-02-09 14:27
#3
Deuce wrote: or semi
or semi transparent PNGs
Sure, that works too. RGBA isnt supported by IE. skip88, there are some things you can do. Read the following post for more info.
http://24ways.org/2009/working-with-rgba-colour
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Tue, 2010-02-09 16:53
#4
well I guess that's just what
well I guess that's just what I want.
not completely fussed about it not workin in IE, I'll use a png as backup like that website you gave suggested.
a little excited considering ive never used RGBA before.. hadnt been exposed to it in web design before
Tue, 2010-02-09 16:36
#5
I love RGBA! I dont care if
I love RGBA! I dont care if IE doesnt like it, screw them!
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Wed, 2010-02-10 00:20
#6
cheers.
cheers.
for anyone else looking at this, heres what mine's ended up as
.baseline-text { background: url(../images/background_white60.png); background: rgba(255,255,255,.6); padding: 3px; font-size: 50%; color: #000000; }