Question

我想将jumbotron设置为0.5不透明度。

    <div class="jumbotron">
         <table id="white" class="table table-condensed" id="table">
           <tbody>
           <tr>
             <td>En</td>
             <th>1</th>
           </tr>
           <tr>
            <td>To</td>
            <th>2</th>
           </tr>
           </tbody>
         </table>
    </div>

有没有办法在jumbotron而不是桌子上做到这一点？

Answer 1

使用RGBa

.jumbotron {
   background: rgb(200, 54, 54); /* This is for ie8 and below */
   background: rgba(200, 54, 54, 0.5); 
}

第二行（0.5）的最后一个值是不透明度。

为清楚起见，这不适用于ie8或以下，因为不支持rgba。

Answer 2

向jumbotron提供ID，并通过rgba中的CSS属性将该ID设置为不透明度。

<强> CSS：

#jumbo {
    /* IE8 and below */
    background: rgb(200, 54, 54);
    /* all other browsers */
    background: rgba(200, 54, 54, 0.5);
}
#white {
    background: rgb(255, 255, 255);
}

<强> HTML：

<div class="jumbotron" id="jumbo">
    <table id="white" class="table table-condensed" id="table">
        <tbody>
            <tr>
                <td>En</td>
                <th>1</th>
            </tr>
            <tr>
                <td>To</td>
                <th>2</th>
            </tr>
        </tbody>
    </table>
</div>

通过子元素的rgba将不透明度设置为不透明。

JSFiddle Here

Answer 3

Demo Fiddle

CSS不透明度由父级定义，是一个层次结构属性，因此任何子级都继承/父级不透明。

为嵌套元素实现不同级别的不透明度的方法是使用 rgba 值设置任何相应的颜色属性，但这不适用于背景图像等（除非在img标签中，否则它们可以单独定位）

More on RGBa from MDN

RGBa ..扩展RGB颜色模型以包括＆＃34; alpha＆＃34;允许颜色不透明度的规范。意味着不透明： 0 =透明; 1 =不透明;

只是jumbotron的不透明度

3 个答案:

Demo Fiddle