CSS Transparent Gold Background

Question

I struggled for many days on how to achieve this transparent gold on the right side of the image below.

This is what exactly looks in the PSD, but when you save it as .PNG, it seems like it looks in a completely different color, as it turns yellow. Perhaps because it does not use the colors of the web standard. So I am trying to use the CSS solution for this code sample below, but I don’t know how to do it correctly or what should be the color combination that I should 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>

Run codeHide result

Answer 1

You can achieve the use of css property conversion. 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>

Run codeHide result

Answer 2

mix-blend-mode ; .

, , mix-blend-mode: multiply; , , .