css - 防止背景图像放大

Question

我有一个带有背景图像的 div。当用户从浏览器放大页面时(使用 Ctrl & + 或 Ctrl + 滚动)，我不想放大图像。缩放后图像应保持不变。有没有办法做到这一点？

这是包含背景图像的 div 的样式:

.owl-slide{
    background-image: url('...');
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我知道正常行为是放大页面内的所有内容，甚至是图像。但这是客户的要求，需要解决，即使我不同意。

Answer 1

套装top和 left元素的值并添加 position:absolute .还设置了width和 height .

.owl-slide {
  background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}

<div class="owl-slide">Sample div</div>