Question

我有一个疑问是否需要为CSS Sprite图像提供负值，我使用的是垂直spirte图像。我是否可以在此提供积极的价值观，如果是，它也适用于响应式版本。

background:url(images/test.png) 0 232px/ 100% auto;

Answer 1

是的，您可以将负值添加到background-position: x y。问题是......为什么要将Sprite放在不可见的区域？

为什么背景位置为负？

指定background-position: 0 0时，表示精灵图片的左上角位于元素的左上角。既然你想要显示更多的图像内部视图，你必须根据元素将你的精灵移动到所需的方向。因此background-position-x表示您正在将 sprite 左上角移动到元素左上角所在的右上角。

可视化：

$(document).ready(function() {
    setInterval(function () {
        setTimeout(function () {
            $('.position').text('Left: 50px; Top: 50px;');
            $('.window, .wrapper').css({'background-position': '50px 50px'});
        }, 0);

        setTimeout(function () {
            $('.position').text('Left: -50px; Top: -50px;');
            $('.window, .wrapper').css({'background-position': '-50px -50px'});
        }, 1000);

        setTimeout(function () {
            $('.position').text('Left: -50px; Top: 0px;');
            $('.window, .wrapper').css({'background-position': '-50px 0px'});
        }, 2000);

        setTimeout(function () {
            $('.position').text('Left: 50px; Top: 0px;');
            $('.window, .wrapper').css({'background-position': '50px 0px'});
        }, 3000);

        setTimeout(function () {
            $('.position').text('Left: 0px; Top: 0px;');
            $('.window, .wrapper').css({'background-position': '0px 0px'});
        }, 4000);
    }, 5000);
});

.wrapper {
  width: 400px;
  height: 200px;
  position: relative;
  background: url('http://lorempixel.com/400/200/technics/9/') no-repeat;
}
.wrapper:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: white;
  opacity: 0.7;
}
.window {
  position: relative;
  z-index: 5;
  width: 50px;
  height: 50px;
  border-right: 3px dotted #888;
  border-bottom: 3px dotted #888;
  background: url('http://lorempixel.com/400/200/technics/9/') no-repeat;
}
.position {
  background-color: white;
  right: 0;
  bottom: 0;
  position: absolute;
  display: inline-block;
  padding: 3px 10px;
}
.position:before {
  content: 'Position: ';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Real image:
<br/>

<img src="http://lorempixel.com/400/200/technics/9/" />
<hr/>

<div class="wrapper">
  <div class="window"></div>
  <div class="position"></div>
</div>

为什么CSS Spirte的图像应该为负值

1 个答案: