CSS3 background-position

数值偏移

通过数值设置图片的显示位置。

<!-- background-position: 20px 20px | 第一个值左边，第二个上边 -->
<!-- background-position: 50% 50% | 同样也能通过百分比控件显示位置，两个 50% 等于正中间显示 -->

<div style="width:500px;height:200px; background-position: 50% 50%; background-repeat:no-repeat; background-image: url('https://www.jmjc.tech/public/home/img/flower.png')"></div>

显示效果

位置参数

通过位置参数设置图片的显示位置。

<!-- background-position 的位置参数有 left right top bottom center -->
<!-- background-position: center center | 第一个参数代表水平、第二个参数代表垂直 -->

<div style="width:500px;height:200px; background-position: center center; background-repeat:no-repeat; background-image: url('https://www.jmjc.tech/public/home/img/flower.png')"></div>

显示效果