再用vant+vue写项目的时候,有个需求是实现一个定制的进度条,组件没有合适的,索性自己写了,单纯用css实现
直线式进度条
<template>
<div class="bg-line bg">
<div class="line inner"></div>
</div>
</template>
<style>
.bg {
width: 100%;
height: 8px;
border-radius: 4px;
display: flex;
align-items: center;
}
.bg-line {
background: rgba(0, 0, 0, 0.1);
}
.inner {
height: 100%;
border-radius: 4px;
transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
}
.line {
width: 50%;
background-color: var(--color-orange);
}
</style>
来看一下效果:
就实现了
在这个过程中一开始出现了一个问题 再给父元素设置透明度的时候 ,子元素的透明度受到影响,出现下面这种效果
当时代码是这么写得,用的opacity给父元素设置的透明度:
.bg-line{
border-radius: 70px;
opacity: 0.10000000149011612;
background: #000;
}
通过审查元素可以发现,子级继承了父级的opacity为1,从而影响了子级的样式
解决办法:
1、给子集设计opacity为1,没有效果
2、通过查找opacity的样式会被子集继承,但是rgba()不会
所以代码改为如下,问题得到解决:
.bg-line {
background: rgba(0, 0, 0, 0.1);
}
总结:
总结rgba和opacity区别
rgba:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
opacity:
取值为从 0.0 (完全透明)到 1.0(完全不透明)