如何在div上設置部分透明的背景？

Question

我希望div部分透明，以便可以透視背景，但希望其他元素<p>不像圖像中那樣透明。 目前，我正在使用opacity: .4 。

的HTML

<!-- tarifas starts here-->
![<div class="tarifas">
    <h1>Tarifas</h1>

  <h3>Consigue la máxima experiencia sin preocuparte por el roaming</h3>

  <div class="tarifas_left">
    <div class="tarifas_left_top">
      <p>5€<span>/día</span></p>
    </div>

    <div class="tarifas_left_bottom">
      <p>hasta<span>1Gb</span>/día</p>

      <p>router wifi movil</p><button>
      <p>RESERVAR</p></button>
    </div>
  </div>

  <div class="tarifas_right">
    <div class="tarifas_right_top">
      <p>30€<span>/mes</span></p>
    </div>

    <div class="tarifas_right_bottom">
      <p>hasta<span>7Gb</span>/día</p>

      <p>router wifi movil</p><button>
      <p>RESERVAR</p></button>
    </div>
  </div>
</div>

的CSS

tarifas {
  background:url(image/air_image1.jpg) no-repeat scroll 0 -332px rgba(0,0,0,0);
  height:460px;
  position:relative;
  width:100%
}

.tarifas h1 {
  font-size:40px;
  color:#fff;
  margin-left:500px;
  margin-top:28px;
  position:absolute;
  font-family:HelveticaNeue-Light
}

.tarifas h3 {
  font-size:24px;
  color:#fff;
  margin-left:232px;
  margin-top:100px;
  position:absolute;
  font-family:HelveticaNeue-Light
}

.tarifas_left_top {
  position:absolute;
  width:285px;
  height:80px;
  background-color:#AEABA1;
  margin-top:150px;
  margin-left:290px;
  border-radius:10px 10px 0 0;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_left_bottom {
  position:absolute;
  width:285px;
  height:170px;
  background-color:#AEABA1;
  margin-top:237px;
  margin-left:290px;
  border-radius:0 0 10px 10px;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_left_top p {
  font-size:67.48px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light;
  opacity:1
}

.tarifas_left_top p span {
  font-size:12px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom p:nth-child(1) {
  font-size:12px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom p:nth-child(1) span {
  font-size:24px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom p:nth-child(2) {
  font-size:24px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom button {
  border-radius:10px;
  color:#fff;
  font-size:20px;
  height:39px;
  margin-left:65px;
  margin-top:55px;
  width:155px;
  font-family:HelveticaNeue-Light;
  opacity:1
}

.tarifas_right_top {
  position:absolute;
  width:285px;
  height:80px;
  background-color:#AEABA1;
  margin-top:150px;
  margin-left:600px;
  border-radius:10px 10px 0 0;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_right_bottom {
  position:absolute;
  width:285px;
  height:170px;
  background-color:#AEABA1;
  margin-top:237px;
  margin-left:600px;
  border-radius:0 0 10px 10px;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_right_top p {
  font-size:67.48px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_right_top p span {
  font-size:12px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom p:nth-child(1) {
  font-size:12px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom p:nth-child(1) span {
  font-size:24px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom p:nth-child(2) {
  font-size:24px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom button {
  border-radius:10px;
  color:#fff;
  font-size:20px;
  height:39px;
  margin-left:65px;
  margin-top:55px;
  width:155px;
  font-family:HelveticaNeue-Light;
  opacity:1
}

和屏幕截圖：

Answer 1

使用rgba顏色而不是影響元素子元素的opacity 。

例如

background-color: #AEABA1
opacity: .4

將轉化為：

background-color: rgba(174, 171, 161, 0.4)

您可以在此處找到HEX到RGBA轉換器

Answer 2

對於類.tarifas_left_top和.tarifas_left_bottom ，刪除opacity ，而使用background-color: rgba(#,#,#,#) 。 對於不透明度為0.4的背景顏色#AEABA1 ，它轉換為background-color: rgba(174,171,161,0.4) 。

對於IE 8及更低版本，您需要使用filter屬性覆蓋背景。

.tarifas_left_top {
    background-color: rgba(174,171,161,0.4);
    background: transparent\9;
    /* This '\9' is intentional. It's a CSS hack, but
       it works, and it resets the background in IE 8
       and below only. */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66AEABA1,endColorstr=#66AEABA1); 
    zoom: 1;
}

有效地，這為您提供了跨瀏覽器的半透明背景，而不影響元素子級的不透明度。 這些屬性也可以用於border-color和color屬性。