1背景图片
1-1属性名
backgroud-position (bgp)
1-2属性值
background-position:水平方向位置 垂直方向位置;

浏览器显示如下图:

2 练习,看看每种情况的显示。
2-1 默认显示方式,默认方式,
下图为类选择器内容和浏览器显示

body标签内容

一种是默认显示,一种是原点
2-2 位置调整,右边,下角;
下图为类选择器内容和浏览器显示

body标签内容

2-3水平居中,垂直居中 和连写;
下图为类选择器内容和浏览器显示

body标签内容

2-4 像素调节位置
(xs1)从左向右50像素,从上到下100像素;
(xs2)数字为负数时候,是向左,或者向右移动。背景色和背景图只显示在盒子里面。
下图为类选择器内容和浏览器显示

body标签内容

所有代码在此位置
https://app.yinxiang.com/fx/f6ce09fb-569b-4af3-828f-b1a55899f989
(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)
网友评论