- This topic is empty.
-
AuthorPosts
-
February 7, 2010 at 5:21 pm #27908skip88Member
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
Code:No really, problems?css
Code:.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 <span> 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
February 8, 2010 at 8:01 am #70611skip88MemberWhat I want is to have a semi-transparent background (eg. 50% or 60%) behind the text.
But then to have the text fully opaque. Fully visible.So, you mean like this?
Code:.baseline-text-bg {
background-color: white;
padding: 3px;
opacity: 0.6;
filter: alpha(opacity=60);
}.baseline-text {
font-size: 50%;
text-transform: uppercase;
opacity: 1;
filter: alpha(opacity=100);
}February 9, 2010 at 7:18 pm #70702skip88MemberFound a solution here – http://csscreator.com/topic/semi-transp … d-problems
for anyone else coming along this kind of thingWhat I’m doing is using RGBA colour values on the background, and then for a fall-back for the unwilling might of IE, like you suggested tt_mark, I’m using a semi-transparent PNG.
ended up as:
Code:.baseline-text {
background: url(../images/background_white60.png);
background: rgba(255,255,255,.6);
padding: 3px;
font-size: 50%;
color: #000000;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.