css背景图设置

来源:互联网 发布:更相减损术算法步骤 编辑:程序博客网 时间:2024/05/16 08:06

.bgImg1{width: 200px;
height: 500px;
border: 1px solid #999;
background-image: url(img/pangxie.png); 添加背景图
background-repeat: no-repeat; 设置背景图的填充
background-position: 500px 100px; 背景图的位置
}

.bgImg2{width: 200px;height: 200px;
background: url(img/pangxie.png) no-repeat 50px 100px #009;
/50px 100px #009;插入的图片位置,颜色 /
css背景图属性
a、背景颜色
background:color值;
b、背景图片的设置
background-image:url(背景图片的路径及全称);
1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;
2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
4)加载背景图必须有容器区域;
c、背景图片平铺属性
语法:选择符 {background-repeat:no-repeat }
no-repeat:不平铺
repeat:平铺 (默认)
repeat-x:横向平铺
d、背景图片的位置
{background-position:水平方向属性值 垂直方向属性性;}
水平方向值:left/center/right或数值
垂直方向值: top/center/bottom或数值
e、各属性的缩写
{background:属性值1 属性值2 属性值3;}
背景缩写: {background:#00ff00 url(背景图片的路径及全称) no-repeat center top;}

原创粉丝点击