background-position使用

background-position调整背景图片位置的，x和y；雪碧图的原理就是多张图片合成一张，通过调整背景图位置，出现一个图标，然后恰巧容器大小与背景图片大小一致，然后，就出现了效果。

by jun wang

HTML

<div class="layui-layer-ico layui-layer-close1">
  aaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccc ddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff gggggggggggggggggggg hhhhhhhhhhhhhhhh


</div>

<br/>
<p>
  background-position与background-image配合使用
</p>

<div class="one-picture one-picture-close">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd
  eeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc
  dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc
  dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbb
  cccccccccccccccccccccccccc dddddddddddddddddddddddd eeeeeeeeeeeeeeeeee
</div>

CSS

.layui-layer-ico {
  background: url(http://res.layui.com/lay/lib/layer/build/skin/default/icon.png) no-repeat;
  border: 1px solid black;
}

.layui-layer-close1 {
  background-position: 1px -40px;
  cursor: pointer;
}

.one-picture {
  background: url(http://p2.ifengimg.com/fck/2017_22/105856200cf6303_w550_h413.jpg) no-repeat;
  border: 30px solid black;
  padding: 10px;
}

.one-picture-close {
  background-position: 50% 50%;
}