反应样式背景 css 属性答案

【问题标题】：react style background css property反应样式背景 css 属性
【发布时间】：2019-07-14 20:32:07
【问题描述】：

如何在 react 中应用 css 属性 background inline？

我尝试传递以下对象，但没有成功：

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 属性时它确实有效。

我想要这个的原因是因为除了动态背景网址之外，我还需要添加线性渐变。
如果我通过 css 类规则定义它，它将被内联样式覆盖。

编辑：我真的不明白为什么要关闭这个问题，因为题外话。如果需要 css 标签，只需在 cmets (?) 中说明即可。

【问题讨论】：

noRepeat 应该是no-repeat。
@GabrielePetrioli 不幸的是，它没有改变，内联样式不适用。我认为在 react 中添加的所有 css 属性都应该是驼峰式的。
确实不是问题所在。但是骆驼案例是指 css 属性而不是它的值。真正的问题是linear-gradient 创建了一个图像，所以它实际上是指background-image 属性。要拥有两种背景，您需要使用,（参见developer.mozilla.org/en-US/docs/Web/CSS/…）
@GabrielePetrioli 添加, 并使用no-repeat 也没有修复它。（在问题中编辑）。

标签： css reactjs

【解决方案1】：

background 速记规则中的 , 分隔 2 个 backgrounds，而不仅仅是 2 个 background-images。

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

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

【讨论】：

【解决方案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;

【讨论】：

【解决方案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`
};

【讨论】：

no-repeat center center / cover 仅适用于第二背景，不适用于linear-gradient（仅供参考，我没有投反对票，有问题的 cmets 非常有帮助）
@Aprillion 不用担心。感谢您发现错误的, :)
@Aprillion 线性渐变也不需要这些道具，因为它会根据定义填充其容器而不重复。
它是否覆盖由较低优先级规则明确设置的属性，例如在background-size: x; background: linear-gradient(y)?即使是这样，我更愿意明确设置规则来传达我想要覆盖这些属性的意图（以便将来更容易重构） - 假设有实际的低优先级规则与我想要实现的目标相矛盾