How can i make a bg transparent but text not

HTML & CSS
1

i want the p background to be transparent but not affect the span text. so far with the combinations i’ve tried, changing the opacity on the p element changes the span text.

why doesn’t span styles keep the span text 100% trasparency free, in other words, with 0 opacity applied, fully visible?


<p><span>text</span></p>



p{
    background: #000;
    color: #fff;
    width: 100%;
    /* transparent - need hasLayout for ie ( zoom: 1; ) I have width set above */
    filter: alpha(opacity=70);
    opacity: 0.7;
}
p span{
    filter: alpha(opacity=100);
    opacity: 1.0;
}
2

The short answer is that you are seeing the normal behavior for opacity. It affects the container and everything in it, not just the background.

The code that you are presenting suggests that you wish to support IE7. If that is the case, I suggest that you use a semi-transparent image as a background overlay. I have used one successfully many times.

Modern browsers can use rgba() colors which makes applying a background color with transparency a piece of cake. :slight_smile:

Hope this helps.

3

You do it like this to avoid the issue your seeing…

#box {
background:rgb(166,166,166); /* IE6/7/8 /
filter:alpha(opacity=70); / IE6/7/8 /
background:rgba(166,166,166,0.7); / Modern Browsers /
}
#box p {
position:relative; / IE6/7/8 */
}

Now this thread will be number 1 on google and my site with its same text number 30. Awesome lol. Goge will prob think I’m the duplicate content. Nope then down to number 40.

4

so i need to wrap my p element and give the wrapper the opacity, not the p?

5

{position:relative} on the <span> element is the key. It lifts the text above the container that has opacity applied.

Very cool solution!

Using your HTML and @PicnicTutorials’s css:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1047767-how-can-i-make-a-bg-transparent-but-text-not
Thread: how can i make a bg transparent but text not
2013.04.28 11:41
sessions
-->
<head>
    <title>opacity</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

p {
    background:rgb(0,0,255);     /* IE6/7/8 */
    filter:alpha(opacity=30);     /* IE6/7/8 */
    background:rgba(0,0,255,0.3);  /* Modern Browsers */
}
span {
    position:relative;   /* IE6/7/8 */
    color:#f00;
    font-size:2em;
    margin:0;
}

    </style>
</head>
<body>

<p><span>This is a paragraph of text that may extend forever or wrap at the ends of the Earth.</span></p>

</body>
</html>
6

IE6/7/8 get fed the rgb background (and doesn’t read the next rgba background), the opacity filter, and position relative on the inner elements. Modern browsers simply get fed the rgb(a) background. Walla - CSS Opacity that works in all browsers without the hacks. The end!

7

I put my html up there 2 posts ago I don’t know where it went. Here is the acompaining html. Ahh I forgot to wrap it.

<div id="box"> 
<p>Text</p>
</div>
8

{position:relative} on the <span> element is the key. It lifts the text above the container that has opacity applied.

It’s basically a long standing bug rather than a feature but a useful bug at times and often used as a work-a-around. It has no logic as the position:relative should have no effect but by accident it seems to stop the opacity being applied to that element. Although it works in IE8 you have to be careful that parents of the element do not have position applied or strange things may happen (not always).