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>

If i'm understanding correctly, you should look into CSS blend modes. Heres a link https://css-tricks.com/basics-css-blend-modes/ — k.cornett, Dec 05 '17 at 15:01
@ovokuro, not the shape but the transparent background. I can work with the shape as long as I resolved the background. — Randy, Dec 05 '17 at 15:58
@k.cornett, I will look into it. Will get back to you my update. — Randy, Dec 05 '17 at 15:58

score 2 · Answer 1 · edited Dec 05 '17 at 16:55

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>

It might be helpful to show a different background in your code snippet so the op can see the transparency in action. — Jason Silver, Dec 05 '17 at 16:08
That's very useful.! But the problem is, I don't know how to match that exact transparent gold background from my attached image(right side). Maybe I'll have to look at the css blend mode first which mentioned by @k.cornett. And maybe will combine with your code if possible. Thank you so far. — Randy, Dec 05 '17 at 16:14
Hi @karthnik, can you please help me with all the text inside these 3 boxes on this jsfiddle https://jsfiddle.net/randzgonz02/5orouccL/6/? Because it seems that the text inside them are affected and cannot be read easily. I want to display them properly like what we can see from above sample image I uploaded. Do you think it's possible to do this way? — Randy, Jan 15 '18 at 07:08

score 1 · Answer 2 · answered Dec 05 '17 at 16:12

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

CSS Transparent Gold Background

2 Answers2

Linked