html - CSS透明金色背景

Question

几天来，我一直在努力研究如何在下图右侧获得这种透明的金色。

这正是 PSD 中的样子，但当将其另存为 .PNG 时，它看起来像是一种非常不同的颜色，因为它有点变成黄色。可能是因为它不使用网络标准颜色。所以我在下面的这个代码示例中尝试了一些 CSS 解决方案，但我不知道如何正确地做或者我应该使用什么颜色组合。

.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

您可以使用 css 属性转换来实现。希望此代码对您有所帮助。

.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>