Dynamic inline style on vue by sass variables 使用Sass变量在Vue中创建动态内联样式

huangapple go评论59阅读模式
英文:

Dynamic inline style on vue by sass variables

问题

以下是要翻译的部分:

"Here I have code of one block into mySlide" 可以翻译为 "这里我有一个代码块放在mySlide中"

"I should do set background-image and upper that semi-opacity background-color" 可以翻译为 "我应该设置背景图片并将半透明背景颜色放在上面"

"How I should done this?" 可以翻译为 "我应该如何完成这个任务?"

英文:

Here I have code of one block into mySlide

<div :style="{
               'background-image': `url('~@/assets/img/${slide[2].src}')`,
               'background-color': '$tertiary-light-gray',
             }"
     class="carouselSlide__line__block imageBlock">
</div>

I should do set background-image and upper that semi-opacity background-color

How I should done this?

答案1

得分: 0

<style scoped lang="scss">
.imageBlock {
  background-image: 使用 SCSS 在 style 属性中不起作用。您可以在您的 CSS 中使用 [`v-bind`](https://vuejs.org/api/sfc-css-features.html#v-bind-in-css) 来设置您的值;
  background-color: $tertiary-light-gray;
}
</style>
英文:

Using SCSS inside a style attribute does not work. You can use v-bind in your css to set your values.


<div class="carouselSlide__line__block imageBlock"></div>

<script setup>
const image = computed(() => `url('~@/assets/img/${slide[2].src}')`);
</script>

<style scoped lang="scss">
.imageBlock {
  background-image: v-bind(image);
  background-color: $tertiary-light-gray;
}
</style>

huangapple
  • 本文由 发表于 2023年4月13日 17:13:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76003710.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定