html - 透明框在 css 中不带颜色

Question

我在 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>

结果是这样的: 所以我看不到红色的背景。是不是我应该在我的代码中更改，或者 transboxes 不能采用黑色、白色和灰色以外的其他颜色。谢谢!

Answer 1

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

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

请参阅下面的代码片段。让我知道是否有帮助

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