1-背景图
1-1属性名 background-image
1-2属性值
background-image:url(图片路径)；
1-3效果
原图信息
通过html，放入指定位置显示。
图片出来了很多，原因是因为盒子的位置很大，但是图片本身尺寸很小。
代码如下
2-背景平铺
属性名 background-repeat
属性值
2-1，使用 repeat 后，图片和代码对照如下
bacakground-repeat:repeat;没有给图片添加效果，原因是，repeat是默认值；
2-2 使用 no-repeat 后，对照如下图
显示图片没有再平铺，no-repeat 的作用被显示出来；但是，背景没有铺满背景。这里显示了背景颜色在下，背景图在背景颜色上面。
2-3 图片平铺方向-x轴
使用了 repeat-x 后，图片仅显示了x轴的平铺，y轴没有平铺；
2-4 图片平铺方向-y轴
使用了 repeat-y后，图片仅显示了y轴的平铺，x轴没有平铺；
3 图片平铺方式对比和代码
下一篇，写背景位置的练习情况。
（仅为个人自学的一点点思考，如有错漏，欢迎留言指正）
网友评论