1.background-color:颜色;
背景颜色
2.background-imge:url(路径);
盒子有多大就能看到多大的背景图片,如果盒子比较大,那么会自动平铺
3.background-repeat:;背景平铺
当值 为repeat的时候背景为平铺
当值为no-repeat的时候背景为不平铺
repeat-x沿x轴平铺
repeat-y沿y轴平铺
4.background-attachment:;
背景是否跟随滚动
scroll滚动
fixed固定
5.background-position:;
取值:1、方位名词
left right top bottom center这些取值
方位名词书写顺序不论
right top右上角
left top左上角
right bottom右下角
left bottom左下角
2、像素
background-position: 100px 200px;
以盒子的左上角为原点,构建一个坐标系,水平向右,垂直向下
第一个值代表水平位置,第二个值代表垂直位置
3、百分比
以父元素的高度和宽度为占几成
4、混写
background-position:100px center;
水平x轴是100px;
垂直y轴是跟盒子居中;
或者:
background-position:center 100px;
水平x轴是居中的;
垂直y轴是100px;
5、背景的简写形式
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
快捷生成方式:bg+tab键
background:#fff url() 0 0 no-repeat;
6、img和背景图片的区别
第一点不同
1、img不需要设置宽高,可以直接显示出来
2、背景图片必须设置宽高才能显示,背景撑不开容器
第二点不同
1、img是不可以在图片上写字的,字会在盒子的外部(显示不了内容,除非用定位)
2、背景是可以在图片上写文字的,字在图片的里面
在实际中作中
img一般用来做产品图片展示(经常更新)
背景图片一般来做背景 或者一些很少更新的小icon
网友评论