Question

我想要做的是显示具有背景不透明度的块header-wrapper。该块包含图像和文本。我还使用了background-size: cover;来获取响应式图像背景。

我的问题是我只希望块header-wrapper背景不透明，但图像也是不透明的显示。如何将其删除，这里提出的类似问题相关，但只关注文本并不透明。

HTML

<section>

    <div class="header-wrapper">
        <p><img src="http://dev3.rezg.net/rezbase_v3Reservations/external-bec/template5/images/flights-hover.png"/></p>
        <p>Title 1</p>
    </div>

</section>

CSS

body{
    width: 100%;
    background:url(https://aimlessblonde.files.wordpress.com/2014/10/ab-2.jpg);
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;    
}

.header-wrapper{
    background:rgba(224,74,73,0.99); 
    padding:5px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; color:#fff;
    opacity: 0.8;
    margin:0 auto;
    width: 50%;
}

.header-wrapper > p{
    display:inline-block;
    vertical-align:middle;
}

img {
  width: 200px;
}

关于即时工作的示例：fiddle

Answer 1

您可以提供以下方式。不要直接向opacity: 0.8;提供div给背景rgba(224, 74, 73, 0.8);

的不透明度

.header-wrapper {
    background: none repeat scroll 0 0 rgba(224, 74, 73, 0.8);
    border-radius: 4px;
    color: #fff;
    margin: 0 auto;
    padding: 5px;
    width: 50%;
}

检查Fiddle.

希望它有所帮助。

Answer 2

我觉得你有点困惑。

从opacity移除.header-wrapper，只需将背景上的Alpha从99更改为60（或任何您想要的）。

background:rgba(224,74,73,0.60); //this last number is the alpha, has been changed from 90 to 60

请look here了解更多有关rgba的信息。

下面我做了一些更改，向您展示它现在的样子。

body {
  width: 100%;
  background: url(https://aimlessblonde.files.wordpress.com/2014/10/ab-2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.header-wrapper {
  background: rgba(224, 74, 73, 0.60);
  padding: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  margin: 0 auto;
  width: 50%;
}
.header-wrapper > p {
  display: inline-block;
  vertical-align: middle;
}
img {
  width: 200px;
}

<section>

  <div class="header-wrapper">
    <p>
      <img src="http://www.wellclean.com/wp-content/themes/artgallery_3.0/images/car3.png" />
    </p>
    <p>Title 1</p>
  </div>

</section>

Answer 3

试试这个

.header-wrapper{
    background:rgba(224,74,73,0.80); 
    padding:5px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; color:#fff;
    margin:0 auto;
    width: 50%;
}

这是你要实现的吗？让我知道

Answer 4

如果您只想要背景半透明，只需将该alpha应用于颜色本身：

.header-wrapper{
    background:rgba(224,74,73,0.8); /* 0.99 -> 0.8 */ 
    padding:5px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; color:#fff;
    /* opacity: 0.8; */ /* rid of opacity */
    margin:0 auto;
    width: 50%;
}

从图像中删除不透明度但保留背景

4 个答案: