1

我正在使用网站标题，我需要在标题的背景上放置一些线条。一旦我把它放在一些不透明的地方，我就会遇到问题。我所有的标题现在都处于不透明状态。

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/

4

3 回答 3

2

Child 元素总是继承父元素的 Opacity。

所以你需要像这样赋予不透明度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);

    }
于 2013-10-23T16:50:50.463 回答
1

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

.strips
{
    background: rgba(0,0,0,0.3) url(../img/picture.png);
}
于 2013-10-23T16:54:06.293 回答
1

使用 rgba 背景颜色。

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

或者，简而言之：

background: rgba(255,255,255,0.3) url(../img/picture.png);
于 2013-10-23T16:44:44.087 回答