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背景透明度/背景色渐变/宽高的应用
发布评论