Swiper-OpenCart-背景全尺寸图像不工作
我正在尝试制作背景全尺寸图像为每个幻灯片幻灯片在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应该覆盖整个背景。但尽管如此,结果是：
看起来背景图像是试图适合在块只有顶部和底部的角。有什么我遗漏的吗？
共有1个答案
您非常接近，但CSS属性实际上是“background-attachment:cover；”，而不是“background-size:cover；”。
这应该可以解决您调用的问题。另一个可能有帮助的方法是使用background的速记方法，例如，不使用background:url（{{banner.image}}）；背景重复：无重复；背景-位置：中心中心；background-size：cover；您可以使用background:#000000 url（{{banner.image}}）no-repeat cover center；
-
在CSS3之前，我们不能指定背景图像的显示大小，一般是按图像的原始尺寸显示。在CSS3中，通过 background-size属性，可以设置背景图像的显示尺寸。 background-size属性的值可以是预定义关键字 cover | contain，也可以是使用长度值、百分比或 auto 定义背景图像的尺寸，长度和百分比不允许负值。 使用预定义值时，cover 表示背景图像完全覆盖容器的背景区域
-
问题内容： 有没有已知的方法可以使IE中的CSS样式起作用？ 问题答案： 有点晚了，但这也可能有用。有一个适用于IE 5.5+的IE过滤器，您可以应用： 但是，这会缩放整个图像以适合分配的区域，因此，如果您使用的是精灵，这可能会引起问题。
-
问题内容： 是否可以使用CSS设置背景图片的大小？ 我想做类似的事情： 但是这样做似乎是完全错误的… 问题答案： CSS2 如果需要放大图像，则必须在图像编辑器中编辑图像本身。 如果使用img标签，则可以更改大小，但是如果您需要将图像作为其他内容的背景，那将无法达到预期的效果（并且它不会像您想要的那样重复出现）… CSS3 释放力量 在CSS3中使用可以做到这一点。 所有现代的浏览器都支持此功能，
-
问题内容： 我只是从一个网站上开始，已经遇到了一个小问题，无法找到特定的解决方案。 我想让我的网站背景适合任何屏幕尺寸，无论宽度，高度都没有关系。 这是我的图片的链接： 编辑 我不知道出了什么问题，但是由于某种原因，身体甚至不想获取背景图像。它仅显示纯白色背景。 问题答案： 您可以使用此插件http://dev.andreaseberhard.de/jquery/superbgimage/ 要么
-
背景图像在大屏幕上不显示为完整图像，但在小屏幕上很合适。 在所有的屏幕上，图像都有一个特定的维度来作为响应？
-
我实际上正在学习Angular2,但我遇到了一个...CSS问题o_O我曾搜索过一个类似的问题,但没有任何成功,现在开始： 我在中有一个标记元素 我在div中设置了并使用来适应，但似乎根本不起作用，图片不适合div。 我很困惑因为这是第一次发生在我身上 请参阅：我使用styleUrls在组件中注入css规则 代码 谢谢！