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轴没有平铺;
使用了 repeat-y后,图片仅显示了y轴的平铺,x轴没有平铺;
下一篇,写背景位置的练习情况。
(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)
电脑 电脑