javascript - Swiper - OpenCart - 背景全尺寸图像不起作用

Question

我正在尝试为 OpenCart 中幻灯片中的每张幻灯片制作背景全尺寸图像。如我所见，OpenCart 使用 Swiper 创建此 slider 。这是我的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应该涵盖整个背景。但尽管如此，结果是下一个:



看起来背景图像试图仅通过顶 Angular 和底 Angular 来适应 block 。有什么我想念的吗？

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;