css颜色转换成rgba格式
文章描述：
Vue把css颜色转换成rgba格式
html
<template>
<div class="container">
<span style="background: #FF0000;" class="title">地下城与勇士</span>
<span :style="{background:bgcolor}" class="title">英雄联盟</span>
</div>
</template>
javascript
export default{
data(){
return{
bgcolor:''
}
},
created() {
// 使用示例
let rgbaColor = this.hexToRgba('#FF0000', 0.5); // 返回 "rgba(255, 0, 0, 0.5)"
console.log(rgbaColor)
this.bgcolor = rgbaColor
},
methods:{
hexToRgba(hex, alpha) {
// 将十六进制颜色转换为RGB，然后转换为RGBA
let r = parseInt(hex.slice(1, 3), 16);
let g = parseInt(hex.slice(3, 5), 16);
let b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
}
}
css
.container{
padding: 100px ;
}
.title{
padding: 20px 20px;
color: #fff;
border-radius: 4px;
line-height: 40px;
margin-right: 10px;
}
发布时间：2025/02/27
发表评论