透明框在css中不着色答案

【问题标题】：The transparent box doesnt take color in css透明框在css中不着色
【发布时间】：2016-08-10 07:32:32
【问题描述】：

我在 html css 中的文本框后面有一个图像。我希望这个文本框是透明的，但有一些颜色。一切都很好，但除了黑色和白色外，transbox 似乎没有彩色。这是我的html代码：

.background {
  background: url(../images/background.png) repeat;
  border: 2px solid black;
  z-index: -1;
  width: 100%;
  height: 800px;
  position: relative;
  opacity: 0.4;
  -webkit-filter: sepia(100%);
  /* Chrome, Safari, Opera */
  filter: sepia(100%);
}
.transbox {
  margin: 30px;
  width: 600px;
  background-color: red;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}
.transbox p {
  margin: 20px;
  font-weight: bold;
  color: #000000;
}

<div class="background">

  <div class="transbox">
    <p>IMPORTANTE COMUNICAZIONE</p>
    <p>Nei mesi di Luglio ed Agosto operatività ridotta per avvicendamento ferie. Vi possono essere ritardi nelle spedizioni. Saremo chiusi dal 10 al 19 Agosto. Potete inviare i vostri ordini che saranno evasi dal 23 Agosto. Non dimenticate di indicare le
      date in cui sarete assenti per ferie od altro. Grazie.</p>
  </div>
</div>

结果是这样的：所以我看不到红色的背景。是我在我的代码中需要更改的东西，还是转换器不能采用除黑色、白色和灰色之外的其他颜色。谢谢！

【问题讨论】：

看来您的示例运行良好。
是的。它工作正常
我编辑了我的问题。
是的，它可以工作，但背景不是红色。是吗？
我在您的代码中没有看到“红色”。我确实看到了“棕褐色”，这与您发布的图像相匹配...

标签： html css

【解决方案1】：

因为您在 .background 上具有 filter:sepia(100%)，即 parent 的 .transbox，transbox 继承了 filter，这就是为什么您的颜色是黑色或白色而不是其他颜色的原因。

一种解决方案是在.background 上使用:before 伪元素并将background-img 和filter:sepia(100%) 添加到该伪元素，而不是在.background 上

参见下面的代码 sn-p。如果有帮助，请告诉我

.background {
 
  border: 2px solid black;
  z-index: -1;
  width: 100%;
  height: 800px;
  position: relative;

}
.transbox {
  margin: 30px;
  width: 60%;
  background-color: red;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}
.transbox p {
  margin: 20px;
  font-weight: bold;
  color: #000000;
}
.background:before{
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico) repeat;
    opacity: 0.4;
  -webkit-filter: sepia(100%);
  /* Chrome, Safari, Opera */
  filter: sepia(100%);
}

<div class="background">

  <div class="transbox">
    <p>IMPORTANTE COMUNICAZIONE</p>
    <p>Nei mesi di Luglio ed Agosto operatività ridotta per avvicendamento ferie. Vi possono essere ritardi nelle spedizioni. Saremo chiusi dal 10 al 19 Agosto. Potete inviare i vostri ordini che saranno evasi dal 23 Agosto. Non dimenticate di indicare le
      date in cui sarete assenti per ferie od altro. Grazie.</p>
  </div>
  </div>

【讨论】：

谢谢！真的很有帮助！

【解决方案2】：

不幸的是只有一个包装器。检查这个...

.wrapper {
  position: relative;
  width: 92vw;
  height: 6em;
  margin: 10px 4vw;
  border: 1px solid black;
  background-image: url(http://beerhold.it/400/300);
  background-size: cover;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.3;
  filter: alpha(opacity=30);
  /* For IE8 and earlier */
}
.transbox {
  position: absolute;
  width: 100%;
  height: 100%;
  color: black;
}
.transbox p {
  margin: 20px;
  font-weight: bold;
  color: #000000;
}

<div class="wrapper">
  <div class="transbox">
    <p>IMPORTANTE COMUNICAZIONE</p>
    <p>Grazie.</p>
  </div>
  <div class="overlay"></div>
</div>

【讨论】：