Swiper - OpenCart - 背景全尺寸图像无效

Question

我正在尝试为OpenCart中的幻灯片中的每张幻灯片制作背景全尺寸图像。正如我所见，OpenCart使用Swiper创建此滑块。以下是我html的样子：

{% for banner in banners %}
    <div class="swiper-slide text-center" style="background: url({{ banner.image }}); background-repeat: no-repeat; background-position: center center; background-size: cover;">
        ...
    </div>
{% endfor %}

我认为，background-size: cover应涵盖整个背景。但尽管如此，结果仍然是：

看起来背景图片仅尝试通过顶角和底角装入块。我有什么遗失的吗？

Answer 1

你非常接近，但CSS属性实际上是“background-attachment: cover;”而不是“background-size: cover;”。这应该可以解决你正在调用的问题。
<另一件可能有用的事情就是使用简写方法作为背景，例如，而不是使用background: url({{ banner.image }}); background-repeat: no-repeat; background-position: center center; background-size: cover;

您可以使用background: #000000 url({{banner.image}}) no-repeat cover center;