测评资讯
如何设置为什么片的效果
2023-04-26 06:16  浏览:205
1-背景图1-1属性名 background-image1-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 支持平铺方式对比和代码

下一篇,写背景位置得练习情况。

(仅为个人自学得一点点思考,如有错漏,欢迎留言指正)