CSS属性background-image无法正常工作，但是如果在style =“ background-image：url...”

如何解决CSS属性background-image无法正常工作，但是如果在style =“ background-image：url...”

我有一个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 属性中使用完全相同的属性和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是正确的（如果在浏览器中打开它，我会看到图像），并且我正在复制并粘贴整个属性，因此不会出现错字。

解决方法

已修复！谢谢CBroe！

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

    background: no-repeat center center scroll;

因此，我将其分别添加到每个图像中，然后全局添加到轮播中，不确定是否存在比粘贴并复制3次更干净的方法，但仍然可以使用