1

Is it possible to see an overlap of these 2 DIVs to show like this ?

<div style="position:relative;margin-top:100px;width:500px;height:300px;">
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute;"></div>
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>        
</div>

Even if it works using only latest CSS3 or even -webkit- properties.

EPQRS
  • 1,093
  • 2
  • 13
  • 17
  • http://stackoverflow.com/questions/4276859/are-photoshop-like-blend-modes-possible-in-html5 – Nitesh Jun 12 '13 at 10:35
  • If I change the alpha value of both the DIVs, the non-overlapped parts also gets the opacity which I don't want. – EPQRS Jun 12 '13 at 10:48
  • Are you going to have anything other than colour in these divs? – Pete Jun 12 '13 at 11:13
  • Nope. These are just going to be colour boxes. – EPQRS Jun 12 '13 at 11:20
  • Could you not just add a third div and then use something like this to set the colour: http://www.xarg.org/project/jquery-color-plugin-xcolor/ – Pete Jun 12 '13 at 13:05
  • I was hoping for a CSS3, -webkit- solution and not a JS one. – EPQRS Jun 12 '13 at 13:23
  • ok how about the third div with just a background colour set: http://jsfiddle.net/peteng/RDwmQ/2/ – Pete Jun 12 '13 at 13:45

2 Answers2

0

You've almost got it there, you just need to set an opacity to the overlaying div. You're already using rgba() color values, just the last unit 1 should be set to something lower than one: 

#parent {
    position:relative;
    margin-top:100px;
    width:500px;
    height:300px;
}

#one {
    background-color:rgba(23, 170, 180, 1);
    width:60px;
    height:145px;
    position:absolute;
}

#two {
    background-color:rgba(249, 177, 67, 0.5);
    width:110px;
    height:70px;
    position:absolute;
}

http://jsfiddle.net/VAWPK/

After reading your comments and seeing that you don't want the non overlapped parts of the divs to be affected by alpha values or opacity, you're going to have to look into <canvas>/javascript plugins like the one Nathan Lee linked to.

Kyle
  • 65,599
  • 28
  • 144
  • 152
0

try this i hope this will help for you

<div style="position:relative;margin-top:100px;width:500px;height:300px;">
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute; z-index: 1;
opacity: 0.5; left: 25px;"></div>
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>        
</div>

see this http://jsfiddle.net/xu8n5/1/

Pawan Lakhara
  • 1,146
  • 4
  • 16
  • 28