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; 應該運作良好，但你需要玩一下才能獲得理想的效果。

請記住， 瀏覽器支持是多種多樣的