homepage Welcome to WebmasterWorld Guest from 54.198.142.255
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Matching a transparent color to a solid
Need a method
CSS_Kidd




msg:4055983
 4:35 pm on Jan 7, 2010 (gmt 0)

I hope I can explain this right.

I have a solid blue background color on a web page. Then I have a 800px solid white centered container that is going to hold all my content.

What I want to do is have transparent blue div that while over the white, will be as close to the solid blue page background as I can get it.

Right now I am just eyeballing it. And I would like to know if there is an actual method to figuring this out. I have searched everywhere with no answers.

This is as close as I can get it.
solid blue background = #99ccff
transparent blue over solid white = Opacity 37%, #0099FF

NOTE:
There is no CSS alpha/trans applied. The trans blue is a transparent png image created in illustrator set to 72ppi in RGB color mode (as basic as it gets).

If anyone has a method other than just "eying it", please let me know

 

limbo




msg:4059262
 6:58 pm on Jan 12, 2010 (gmt 0)

Screengrab the image - open in image editor and 'pipette' the colour?

CSS_Kidd




msg:4059273
 7:24 pm on Jan 12, 2010 (gmt 0)

Well that makes more sense... Match the solid to the merged color that the transparent over white produces!

You know what is stupid I did that for a site I did a while back. I guess I was just so dead set and concentrating so much on matching the solid (websafe) color, that I forgot it was much easier to do the reverse.

birdbrain




msg:4100613
 7:33 pm on Mar 18, 2010 (gmt 0)

Hi there CSS_Kidd,

you may find this example of interest.

There is an arithmetical method to calculate the background-color value of the div with opacity
applied, so that it matches the body background-color value.

The arithmetic needs to be applied to both the opacity div and the container div to obtain
the correct result.

The body background-color is #99ccff or rgb(153,204,255).
The container background-color is #ffffff or rgb(255,255,255).

We cannot use your opacity value of 0.37 in this case as it would produce a negative r value.
The minimum value would be 0.4.

Here is the arithmetic....

  1. body - rgb(153,204,255)
  2. container - rgb(255,255,255)
  3. opacity:0.4
  4. r value=(r*0.4)+(255*0.6)=153, which gives r=0
  5. g value=(g*0.4)+(255*0.6)=204, which gives g=127
  6. b value=(b*0.4)+(255*0.6)=255, which gives b=255
  7. opacity div - rgb(0,127,255) or #007fff


Here is the example..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background-color:rgb(153,204,255); /* #99ccff */
}
#container {
width:760px;
padding:60px 0;
margin:auto;
background-color:rgb(255,255,255); /* #ffffff */
}
#div1 {
padding:10px;
background-color:rgb(0,127,255); /* #007fff */
opacity:0.4;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#div1 {
filter:alpha(opacity=40);
zoom:1;
}
</style>
<![endif]-->

</head>
<body>

<div id="container">
<div id="div1">opacity 0.4</div>
</div>

</body>
</html>


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved