CSS 属性 background-image 不起作用，但如果在 style="background-image: url(...)" 中使用它会起作用答案

【问题标题】：CSS property background-image not working, but it does if used in style="background-image: url(...)"CSS 属性 background-image 不起作用，但如果在 style="background-image: url(...)" 中使用它会起作用
【发布时间】：2020-10-26 18:44:16
【问题描述】：

我有一个 Bootstrap 4 幻灯片放映，我需要使用以下属性为每张幻灯片设置图像：

    background-image: url('https://res.cloudinary.com/XXX')

下面是我的代码，然后我会解释什么是奇怪的：

<div id="home-showcase-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item slide-show-image-1 active"></div>
        <div class="carousel-item slide-show-image-2"></div>
        <div class="carousel-item slide-show-image-3"></div>
    </div>
</div>

这些是 css 属性：

.slide-show-image-1 {
    background-image: url('https://res.cloudinary.com/XXX')
}

所有 3 张图片以此类推。

上面的代码不起作用。当我使用 chrome web 开发工具检查时，我看到属性 background-image 有一条线。

但是！如果我在 style 属性中使用 exact same property 和 url，它可以工作！

<div id="home-showcase-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active" style="background-image: url('https://res.cloudinary.com/XXX')"></div>
        <div class="carousel-item" style="background-image: url('https://res.cloudinary.com/XXX')"></div>
        <div class="carousel-item" style="background-image: url('https://res.cloudinary.com/XXX')"></div>
    </div>
</div>

这怎么可能？我确定 URL 是正确的（如果我在浏览器中打开它，我会看到图像）并且我正在复制并粘贴整个属性，因此不会出现拼写错误。

【问题讨论】：

使用您的浏览器检查器准确地向您展示正在发生的事情。可能是“网络”选项卡。
“当我使用 chrome web 开发工具检查时，我看到属性 background-image 有一条线。” - 那么你的样式表中可能有一条规则(s) 在某处，具有更高的特异性，它会完全覆盖背景图像或背景。
嗯，好点，没想到。样式属性的优先级是否高于 CSS 规则？两者当然都适用于同一个 HTML 元素
尝试background 属性而不是background-image
非常感谢你们！结果发现两条 CSS 规则有冲突。

标签： html css twitter-bootstrap background-image

【解决方案1】：

已修复！谢谢 CBroe！

原来我添加到 .carousel-inner 的以下属性覆盖了我的 CSS 规则：

    background: no-repeat center center scroll;

所以我将它单独添加到每个图像而不是全局添加到轮播中，不确定是否有更干净的方法而不是粘贴和复制 3 次，但它仍然有效

【讨论】：