Question

如何在反应中内联应用css属性background？

我尝试传递以下无效的对象：

let style = {
    background:
        `linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
          ), url("${ place.imgUri }") no-repeat center center cover`
};

注意：它仅在添加url属性时才起作用。

之所以要这样做，是因为除了动态background-url外，我还需要添加线性渐变。
如果我通过css类规则定义它，那么它将被内联样式覆盖。

编辑：我真的不明白为什么要关闭这个问题，因为主题不对。如果需要CSS标签，请在注释（？）中说出来。

Answer 1

简写规则{{1}中的,分隔2个background，而不仅仅是2个background。

因此，如果您需要1条覆盖所有属性的速记规则：

background-image

Answer 2

在Gabriele Petrioli的帮助下，它奏效了。
我刚刚添加了：

let style = {
    backgroundImage:
        `linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
          ), url("${ place.imgUri }")`
};

然后刚刚添加了CSS类属性：

background-size: cover;
background-position: center;
background-repeat: no-repeat;

Answer 3

原始代码有几个问题。

首先，由于linear-gradient引用了background-image属性，因此您实际上需要两个背景，因此需要使用,来将它们分开。

第二，速写版本中background-size的语法在/之后。

应该是

let style = {
    background:
        `linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
          ), url("${ place.imgUri }") no-repeat center center / cover`
};

反应样式背景css属性

3 个答案: