黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: 李友情    时间: 2019-10-15 09:14
标题: 技术贴
通过这次的学习熟练掌握了html和css网页布局，举个例子科普一下;
图片定位：background-position
•        图片定位：background-position:X坐标（水平方向）  Y坐标（垂直方向）；
•         取值：可以是纯数字，也可以是方向英文（top/bottom/left/right/center）;
•         注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写；
•        方向因为left和right只会控制左右方向，top和bottom只会控制上下的方向；
•        background-position:X坐标（水平方向）  Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；
一定要注意，
如果使用背景图片定位的时候不管是用方位吗名词还是用精确的像素值，我们X方向和Y放的位置一定不要相互调换；
超大背景图的插入
•        一般情况下我们用大背景图是为了匹配不同的分辨率的屏幕，所以图片越大越好，但是我们用背景插入图片之后需要将图片的位置进行位置调节，让图片的中间位置显示出来，可以是用 background-position:center 0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）；
背景图片固定：background-attachment:fixed;
背景简写

•        background:背景颜色  url    平铺方式    是否固定     X轴    Y轴；
•        注意：属性值没有书写顺序，没有的属性可以省略不写；

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2