Html：将文本放在半透明div中

Question

我想把文字放在半透明div中，这就是我所做的。

HTML

df.loc[pd.DatetimeIndex(indexer)]

CSS

<div class="overlay_image">
   <div>
       <h1 class ="slogan">In div</h1>
   </div>
</div>
<h1 class ="slogan">Out of div</h1>

Demo

但是，我希望.overlay_image { width: 800px; height: 160px; background: #0066CC; opacity: 0.35; } .slogan{ opacity: 1; } 中的颜色等于div的颜色。我不希望div这些词变成半透明。

Answer 1

使用rgba()作为背景。这样，只有背景是透明的，但元素的内容不受影响。

.overlay_image {
    width: 800px;
    height: 160px;
    background: rgba(0, 102, 204, 0.35); /* use rgba */
    /*opacity: 0.35;*/
}