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> 

Answer 2

在叠加层上使用适当的mix-blend-mode值应该可以解决问题; 你可以在这里阅读更多有关所有值的信息 。

基于玩了一下，我认为mix-blend-mode: multiply; 应该运作良好，但你需要玩一下才能获得理想的效果。

请记住， 浏览器支持是多种多样的