你需要知道的网页全屏背景小知识

网页全屏背景图

当我们使用background-image添加背景图片时,会默认的把图片在水平和垂直方向上铺满整个元素,但作为网页背景只需要一张图作为背景图时,就只会希望图片只出现一次,铺满整个页面,具体步骤如下:

第一步:加入背景图片

第一步先使用background-image属性设置url添加一张背景图,初始效果如下,是铺满整个屏幕的:
你需要知道的网页全屏背景小知识

// 插入一张背景图片
background-image: url("images/bj_2.jpg");

第二步:设置背景平铺方式

第二步使用background-repeat 属性,设置no-repeat属性值让图片不重铺,你需要知道的网页全屏背景小知识

background-image: url("images/bj_2.jpg");
// 这是图片不重铺
background-repeat: no-repeat;

background-repeat 属性值如下:

属性值内容
repeat背景图像将向垂直和水平方向重复,这是默认
repeat-x只会在水平方向重复背景图片
repeat-y只会在垂直方向重复背景图片
no-repeat图片不会重复,只会出现一次
inherit继承父元素的值

第三步:设置图片大小

第三步使用background-size属性设置背景图片大小,把宽和高长度都设置为100%,你需要知道的网页全屏背景小知识

background-image: url("images/bj_2.jpg");
background-repeat: no-repeat;
//设置图片大小
background-size: 100%,100%;

background-size属性值如下:

属性值内容
length设置背景图片高度和宽度,第一个值为宽度,第二个值为高度,如果只给出一个值,第二个值为auto(自动)
percentage以父元素的百分比设置背景图像的宽度和高度,第一个值为宽度,第二个值为高度,如果只给出一个值,第二个值为auto(自动)
cover把背景图片缩放至足够大,使其背景图像完全覆盖背景区域,某些部分也许无法显示在背景定位区域中
contain把图像缩放至最大尺寸,使其宽度和高度完全适应内容区域

第四步:设置背景图随页面不滚动

定义背景图像之后,默认情况下,当窗体的内容滚动时,窗体的背景图像会跟着一起移动,这时就需要background-attachment属性,可以控制背景图像是否跟着元素的内容一起移动
你需要知道的网页全屏背景小知识

background-image: url("images/bj_2.jpg");
background-repeat: no-repeat;
background-size: 100%,100%;
//设置图片相对于窗口固定
background-attachment: fixed;

background-attachment属性值如下:

属性值内容
fixed背景图像相对于窗体固定。任凭页面内容滚动,背景图像始终静止不动
scroll背景图像相对于元素固定。当窗体的内容滚动时,窗体的背景图像会跟着移动;当一般元素的内容滚动时,背景图像不会跟着移动,因为背景图像总是要跟着元素本身,但会随元素的祖先元素或窗体一起移动
loca背景图像相对于元素的内容固定。当元素的内容滚动时,背景图像总是要跟着内容一起移动

补充

如果不使用background-attachment:fixed;当页面上下滚动时,图片总是会跟着页面一起滚动,
你需要知道的网页全屏背景小知识


当然,网页背景填充的方式不止这一种,如果有更好的方式,小伙伴们可以在下面评论留言哦。

匿名

发表评论

匿名网友