html - 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/