时间戳

首页 > 解决方案 > vue组件上的内联css

css - vue组件上的内联css

问题描述

我正在尝试在 vue 中的 div 上应用背景颜色，并且我能够从我的数据中传入一个 hex_code，但我想将rgba样式应用于背景。我的语法有问题吗？

      <div
        v-for="item in itemList"
        :style="{ 'background-color': `rgba(${ item.hex_code }, 0.5)` }"
        :key="item.id">
     </div>

标签： cssvue.js

解决方案

是的，rgba(hex, opacity)在 CSS 中是不允许的（但在 SCSS 中是可能的），它必须是rgba(red, green, blue, opacity). 你想要这样的东西：

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

另请参见RGB 和 hex 之间的转换。

编辑：由于您在绑定属性中执行此操作，因此您可以定义一个辅助函数来将您的转换hex_code为适合 CSS 的 RGB：

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

使用此辅助函数（改编自链接的答案）：

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
    : "0, 0, 0";
}

请注意，这将转换"#ff00aa"为"255, 0, 170"，因此在您的background-color, 您最终会得到rgba(255, 0, 170, 0.5).

推荐阅读