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
}

和截图：

Screenshot

Answer 1

使用影响元素子元素的rgba颜色而不是opacity。

例如

background-color: #AEABA1
opacity: .4

会转化为：

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

您可以找到HEX到RGBA转换器here

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属性。

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

2 个答案: