CSS透明的金背景 [英] CSS Transparent Gold Background

问题描述

我一直在为如何在下面的图片右侧实现这个透明黄金而奋斗了几天。

I've been struggling for days on how to achieve this transparent gold at the right side of the image below.

这就是PSD中的样子，但将它保存为.PNG时，它看起来像是一个非常不同的颜色，因为它变成黄色。也许是因为它不使用网页标准颜色。所以我在下面的代码示例中尝试了一些CSS解决方案，但我不知道如何正确执行，或者应该使用哪种颜色组合。

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>

推荐答案

您可以使用css属性来实现transform.Hope这段代码有所帮助。

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>

这篇关于CSS透明的金背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！