结合线性渐变和动态背景图像

Question

我正在尝试在背景图像as demonstrated at w3school上实现颜色叠加，但是我想对动态设置的背景图像进行设置（我目前正在使用VueJS）。

我要实现的目标：

<div class="hero-image">...</div>

.hero-image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.png');
    background-size: cover;
}

首次尝试-将背景图像提取到html：

问题：：这将覆盖颜色信息，并且仅使用背景图像设置。我还尝试使用 background 属性代替CSS代码中的 background-color 。

<div class="hero-image" :style="{ backgroundImage: `url('${image}')`}">...</div>

.hero-image {
    background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-size: cover;
}

第二次尝试-提取完整的 background 属性：

问题：，除了 background-size 属性现在被忽略之外，此方法有效。我试图将 cover 添加到html中的 background 属性中，但是它也不起作用。

<div class="hero-image" :style="{ 
  background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>

.hero-image {
    background-size: cover;
}

Answer 1

根据Temani的建议，第二次尝试应在html中使用 background-image 而不是仅 background 。解决方案：

Range

<div class="hero-image" :style="{ 
  backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>