CSS Transparent Gold Background

Question

I've been struggling for days on how to achieve this transparent gold at the right side of the image below.

That is what exactly look like in the PSD but when saving it as .PNG it seems to look like a very different color as it kinda turns to yellow. Maybe because it doesn't use the web standard colors. So I'm trying some CSS solution on this code sample below, but I don't know how to do it right or what should be the color combination should I use.

 .bg-gold { position: relative; } .bg-gold-1, .bg-gold-2 { position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; } .bg-gold-1 { background: #b38600; opacity: .5; } .bg-gold-2 { background: #b36b00; opacity: .2; } img { position: relative; z-index: 1; width: 100%; height: auto; } 

 <div class="bg-gold"> <img src="http://wilsin.com.sg/wp-content/uploads/2017/08/index-banner-1-black-and-white.jpg" alt=""> <div class="bg-gold bg-gold-1"></div> <div class="bg-gold bg-gold-2"></div> </div> 

Answer 1

You can achieve using css property transform.Hope this code helps.

 .infoContainer { margin: 30px 20px; display: inline-block; width: 100px; height: 100px; overflow: hidden; border-radius: 20px; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ position:relative; /* non-essential styling */ -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05); box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05); background-color:rgba(218,165,32,0.5); } .infoContainerB { margin: 10px 10px; display: inline-block; width: 100px; height: 100px; overflow: hidden; border-radius: 20px; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ position:relative; /* non-essential styling */ -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05); box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05); background-color:rgba(218,165,32,0.8); } .infoContainer p, .infoContainerB p { transform: rotate(-45deg); -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari and Chrome */ position:absolute; top:30px; } .wrapper { font-family: 'Oswald', Arial, Sans; font-size: 16px; position: absolute; } 

 <div class="wrapper"> <figure> <div class="infoContainer"> <p>Howdy!!</p> </div> <div class="infoContainerB"> <p>Howdy B!!</p> </div> </figure> </div> 

Answer 2

Using an appropriate value of mix-blend-mode on your overlay should do the trick; you can read more about all the values here .

Based on playing around a bit, I think mix-blend-mode: multiply; should work well, but you'll need to play around a bit to get the desired effect.

Keep in mind browser support is varied