css背景属性详解(背景图片铺满全屏的简写)
一、背景色属性:background-color取值:任意合法颜色值transparent注意:背景颜色会填充到元素的内容区域,内边距区域以及边框区域二、背景图像属性:background-image取值:url(......
背景图片铺满全屏,记得加个斜杠
background: url() no-repeat center / cover
属性详解:
background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
background:red url(img/bg.png) no-repeat fixed center top
番外:background-position的值
①值如果是方位名词,则两个值前后顺序无关,比如right center和center right 效果是等价的;
如果只指定了一个方位名词,另一个值省略,则第二个值默认为center
/*background-position:cener right;*/ background-position:right center;
②值如果是精确单位,则第一个一定是x坐标,第二个一定是y坐标
如果只指定了一个数值,那么该数值一定是x坐标,另一个默认垂直居中
background-position:20px 50px;
③ 值如果是混合单位,则第一个一定是x坐标,第二个一定是y坐标
background-position:20px center;
一、背景色
属性:background-color
取值:
任意合法颜色值
transparent
注意:
背景颜色会填充到元素的内容区域,内边距区域以及边框区域
二、背景图像
属性:background-image
取值:url(图像url)
ex:background-image:url(a.jpg);
三、背景平铺
属性:background-repeat
取值:
1、repeat
默认值,垂直和水平方向都平铺
2、repeat-x
横向平铺
3、repeat-y
纵向平铺
4、no-repeat
不平铺,仅显示一次
四、背景图片尺寸
属性:background-size
取值:
1、value1 value2
具体数值,value1表示背景图像的宽度,value2表示背景图像的高度
2、value1% value2%
以元素的尺寸占比决定背景图的尺寸
3、cover
覆盖
把背景图扩展至足够的大(等比缩放),直到背景图像完全覆盖到元素区域位置
4、contain
包含
将背景图像等比缩放,直到右边或下边碰到元素边缘为止
五、背景图片固定
属性:background-attachment
取值:
1、scroll
滚动,默认值
2、fixed
固定,将背景图保持在可视化区域内,不随着滚动条而发生变化
六、背景图片位置
属性:background-position
取值:
1、x y
x :背景图像水平偏移位置
取值为正,向右移动
取值为负,向左移动
y :背景图像垂直偏移位置
取值为正,向下偏移
取值为负,向上偏移
2、x% y%
3、
x:left/center/right 替代
y:top/center/bottom 替代
CSS Sprites
将若干幅小图像拼合到一副大图像中,想看具体小图像的时候,配合着背景图已经背景图像位置的方式进行移动,显示
1、根据要看的图像,创建一个元素,该元素大小要与要看的图像大小一致。
2、通过 背景图像以及背景图像位置 移动背景图到 显示的元素中
七、背景属性-简写属性
background:color url() repeat attachment position;
注意:属性值可以省略,省略的话将采用默认值
background:red;
更多推荐
所有评论(0)