标签:repeat-y 代码注释 center 文件 contain family height 边框 inf
背景图:(相关验证代码请查看文件https://files.cnblogs.com/files/blogzzy/background-img.xml,在验证时需将当前不需要验证的代码注释掉)
1.inherit:从父元素继承属性设置
2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
no-repeat:取消默认平铺
repeat-x:横向平铺
repeat-y:纵向平铺
3.background-size:尺寸
px、百分比:依旧默认平铺元素
cover:等比放大覆盖元素
contain:等比放大,直到图片的一边达到元素的边框
4.background-attachment:固定
scroll:图片随滚动条滚动而上下移动
fixed:图片固定在元素中不会随滚动条移动
----由于需要动态设置可以查看代码自己试验
5.background-position:定位
方式1:
(+:取值为正 单位:px)
x:水平偏移 + 右边 -左边
y:垂直偏移 + 下 -上
----background-position:25px 50px;
方式2:
(以元素边框的左右为基准)
x left right center
y top bottom center
----background-position:left top;
----background-position:center;
(需要注意一点的是,除了设置背景图的固定以外,在设置背景图片的尺寸与定位时,若不取消图片的默认平铺,此时依然会对元素进行背景平铺)
html+css-->background-img(背景图的设置)
标签:repeat-y 代码注释 center 文件 contain family height 边框 inf
原文地址:https://www.cnblogs.com/blogzzy/p/11185920.html