CSS：不透明度问题

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

子元素总是继承父元素的不透明度。

所以你需要像这样rgba(0,0,0,0.3)

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

rgba==> a 代表阿尔法

试试这个作为背景图片

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