透明盒子在css中没有颜色

Question

我在html css中的文本框后面有一个图像。我希望这个文本框是透明的，但要有一些颜色。一切都还可以，但除了黑色和白色之外，变电箱似乎没有颜色。这是我的HTML代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果如下： 所以Icant看到背景为红色。 我购买的东西在我的代码中变化，或者变形箱不能采用其他颜色，黑色，白色和灰色。谢谢！

Answer 1

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

一种解决方案是在.background上使用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>

DirectoryIndex Home.php

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
RewriteRule ^view/([0-9A-Za-z]+) view.php?user=$1 [NC,L] #doesn't work causes internal error

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;