Fatal编程技术网
  • css/
  • vue组件上的内联css

vue组件上的内联css

css vue.js

vue组件上的内联css,css,vue.js,Css,Vue.js,我试图在vue中的div上应用背景色，我可以从数据中传入十六进制代码，但我想在背景上应用rgba样式。我的语法有问题吗 <div v-for="item in itemList" :style="{ 'background-color': `rgba(${ item.hex_code }, 0.5)` }" :key="item.id"> </div> 是的，rgba（十六进制，不透明度）在CSS中

我试图在vue中的div上应用背景色，我可以从数据中传入十六进制代码，但我想在背景上应用
rgba
样式。我的语法有问题吗

      <div
        v-for="item in itemList"
        :style="{ 'background-color': `rgba(${ item.hex_code }, 0.5)` }"
        :key="item.id">
     </div>
是的，
rgba（十六进制，不透明度）
在CSS中不允许（但在SCSS中也可以），它必须是
rgba（红色、绿色、蓝色、不透明度）
。你想要的是：

:style="{ 'background-color': `rgba(${ item.red }, ${ item.green }, ${ item.blue }, 0.5)` }"
另见

编辑：由于您是在绑定属性中执行此操作的，因此可以定义一个帮助函数来将您的
十六进制代码
转换为适合CSS的RGB：

:style="{ 'background-color': `rgba(${hexCodeToCSSRGB(item.hex_code)}, 0.5)` }"
使用此辅助功能（根据链接答案改编）：

请注意，这将把
“#ff00aa”
转换为
“255，0，170”
，因此在
背景色中，您将得到
rgba（255，0，170，0.5）
是的，
rgba（十六进制，不透明度）
在CSS中不允许（但在SCSS中可能），它必须是
rgba（红色，绿色，蓝色，不透明度）
。你想要的是：


:style="{ 'background-color': `rgba(${ item.red }, ${ item.green }, ${ item.blue }, 0.5)` }"


另见

编辑：由于您是在绑定属性中执行此操作的，因此可以定义一个帮助函数来将您的
十六进制代码
转换为适合CSS的RGB：


:style="{ 'background-color': `rgba(${hexCodeToCSSRGB(item.hex_code)}, 0.5)` }"


使用此辅助功能（根据链接答案改编）：

请注意，这将把
“#ff00aa”
转换为
“255，0，170”
，因此在
背景色中，您将得到
rgba（255，0，170，0.5）