Question

我正在使用网站标题，我需要在标题的背景上添加一些行。一旦我把它与一些不透明度，我得到一个问题。我的所有标题现在都不透明了。

HTML：

<div class="header">
  <div clas="header strips">
     <div class="some_content"><lots of text</div>
  </div>
</div>

的CSS：

.header
{
   height: 120px;
   width: 100%;
   float: left;
   background-color: #3A5FCD;
   background: linear-gradient(to bottom, #00BFFF,#3A5FCD );
}
.strips
{
    background: url(../img/picture.png);
    opacity: 0.3;
}
.some_content
{
   color: #FFFFFF;
   font-family: MaassslicerItalic;
   font-size: 20pt;
   border-bottom:5px  solid red;
}

我不明白为什么我的<div class="some_content"><lots of text</div>也有不透明度。

这里是原始网站的链接 http://portal.plazma.com.ua/

Answer 1

Child元素始终继承父元素的不透明度。

因此您需要像rgba(0,0,0,0.3)

那样提供不透明度

background: rgba(0,0,0,0.3) url(picture.png);

RGBA ==＆GT; a代表alpha

试试这个背景图片

 .element {
        background: url(picture.png);

        background-color: rgba(0,0,0,0.5);

    }

Answer 2

使用rgba背景色。

像这样：background-color: rgba(255,255,255,0.3)最后一个数字（0.3）是您指定的RGB颜色的不透明度。

或者，简而言之：

background: rgba(255,255,255,0.3) url(../img/picture.png);

Answer 3

您可以在CSS中结合使用背景颜色不透明度。

.strips
{
    background: rgba(0,0,0,0.3) url(../img/picture.png);
}

CSS：不透明度问题

3 个答案: