Jump to content

Opacity problem


lindm

Recommended Posts

Have a problem that the text in a container also gets the opacity of the parent container. I want the opacity of the text to be 100 or 1 depending on browser. Se code below.

<html>
<head>
<style type="text/css">
span#vtipc {
position: absolute;
left: 5px;		
padding: 16px;
background-color: black;
-moz-opacity: 0.75;
opacity:.75;
filter: alpha(opacity=75); 
width:400px;
z-index: 9999;
}

span#vtip {
font-size: 10px;
color:#FFF;
}
</style>
</head>

<body>
<span style="font-size:36px"> BACKGROUND TEXT</span>
<span id="vtipc"><span id="vtip">TIP TEXT</span></span>
</body>
</html>

 

Link to comment
https://forums.phpfreaks.com/topic/187294-opacity-problem/
Share on other sites

An element can never have a higher opacity than it's parent. So if the container has 50% opacity, then the text at 100% opacity will only have 50% overall opacity.

 

So to do what you want, you have to put your text outside the container, then use either relative or absolute positioning to move the text over top the container. The problem however is that you can't have dynamic lengths of text or your positioning will get messed up, unless you use javascript to change the size of the container as necessary. But this won't work with any users who have javascript turned off.

Link to comment
https://forums.phpfreaks.com/topic/187294-opacity-problem/#findComment-989300
Share on other sites

OR, you could just use a png image with partial transparency. I understand IE6 will not support for this, but then again, I'm sure getting absolute/relative positioning to work with JavaScript in IE6 is impossible as well.

 

It reference to Haku's method:

 

An element can never have a higher opacity than it's parent. So if the container has 50% opacity, then the text at 100% opacity will only have 50% overall opacity.

 

So to do what you want, you have to put your text outside the container, then use either relative or absolute positioning to move the text over top the container. The problem however is that you can't have dynamic lengths of text or your positioning will get messed up, unless you use javascript to change the size of the container as necessary. But this won't work with any users who have javascript turned off.

 

This method will work. However, there is a better way of doing this.

 

<div class="parent">

<div class="semi-transparent"></div>

<div class="main-content">

        .... content ......

</div>

</div>

 

/* Now just add some css: */

 

.parent {

position: relative;

}

.semi-transparent {

opacity: 0.5;

background: blue;

height: 100%;

position: absolute;

}

 

This may not work because I am not sure if the absolute positioned div will stretch vertically to fit the parent. I rarely if ever use absolute positioning - it should rarely be used.

 

Keep it simple kid. Use a png image.

Link to comment
https://forums.phpfreaks.com/topic/187294-opacity-problem/#findComment-989326
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.