HTML

<body>
    <div class="container rain-box bg-warning">
        <!-- 这里的w-100指的是子级是父级的100%  只有25%/50%/75%/100%-->
        <!-- h-25/h-50/h-75/h-100指的是子元素是父元素的百分之几
        使用h-25/75/50/100的前提是子元素的父元素必须要有高,没有高的话是没有效果的
        但是由于h-25/75/50/100的优先级高于我们自己写的css的样式,
        所以要先给自己写的盒子的高度加上!important,再把这个盒子给父级
        就可以让子元素用h-25/75/50/100了

        w-25/75/50/100和h-25/75/50/100还有一个值就是auto
         指的就是默认宽高 比如如果是img img自己本身有宽高 
         如果你不想img和父元素一样宽高就可以用auto
        -->
         <!-- 设置背景色的透明度 有这几个值10/25/50/75 -->
        <div class=" w-75 h-50 bg-danger "></div>
        <!-- 使用bg-gradient可以设置颜色线性渐变 -->
        <div class=" w-75 h-25 bg-danger bg-gradient"></div>               
    </div>
    <div class="bg-opacity-50 bg-primary container w-100 h-50 rain-box"></div>
</body>

CSS

 <style>
        .rain-box{
             height: 100px !important;
         }
    </style>

效果

更多推荐

bootstrap背景透明度/背景色渐变/宽高的应用