PDA

View Full Version : Transparencies

iogames
01-19-2009, 10:22 PM
Hiya...

I just want to know how in Main CSS can turn a color in a 10% transparency, since just typing 'transparent' makes disappear the color or border, I just want to low the transparency to 10% or something...

Can you help a brother in problem? :rolleyes:

--------------- Added 1232414666 at 1232414666 ---------------

well so far I have this code, but lowers the opacity of the whole site, and I just want to lower the one for the background :(

opacity:0.3;filter:alpha(opacity=30)

any ideas?
FullyTested
01-19-2009, 11:30 PM
Keep in mind that the opacity command is not the same for all browsers.
SEOvB
01-20-2009, 12:27 AM
You have to apply the opacity to the background class

http://www.mandarindesign.com/opacity.html
iogames
01-20-2009, 08:22 PM
But I did place it on the right spot and nothing... a more exact line of code? someone? :confused:
UKBusinessLive
01-20-2009, 10:33 PM
But I did place it on the right spot and nothing... a more exact line of code? someone? :confused:

Try this, it might work ;)


.transparent_class {
filter:alpha(opacity=10);
-moz-opacity:0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}



But i think this is what your saying;

To get a semi-transparent background of a <div>
(or other element, especially list elements) and yet keep the 100%
opacity of the inner text

That is not how opacity works. The css 3 property 'opacity' applies to a box as a whole and its content (all the contents of that box). Opacity is not inherited, but all the contents of a box whose opacity is lower than 1 (<100%) will appear as semi-transparent (or faded). It is not applied to the background, but the box as a whole. All the content of that box will be affected.

You could try and use RGBA color values.

selector {background: rgba(0,0,255,0.5) } /* semi transparent blue */




Have a peek here for more details http://www.w3.org/TR/css3-color/#rgba-color




:D
iogames
01-21-2009, 03:55 PM
Though task!

I have tried many methods and it doesn't seems to work... Mmmh :confused:
UKBusinessLive
01-21-2009, 05:50 PM
How about this..

<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 1000px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
/* This will make the background image opacity =60*/
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* Edit the above for the forum/Fluid or fixed width*/
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head><body><div class="background">
<div class="transbox">

Forum code goes here ???

</div>
</div></body>
</html>

Its the best bit of code i've managed to fine, you may get a few clues on the coding part from it and your forums css.

ALWAYS, make a backup first :up:
iogames
01-23-2009, 07:03 PM
Must be there:

http://www.arcadia.progvisual.com/maincss.jpg