CSS关于背景的属性
(0)

1.背景图片:

background-image:url(图片地址;绝对路径或相对路径)

2.背景图片平铺:

不平铺:background-repeat:no-repeat;
横向平铺(水平位置):background-repeat:repeat-x;
纵向平铺(垂直位置)background-repeat:repeat-y;
方法1:使用方位名词表示:
背景图片位置:用方位表示(上(top)下(bottom)左(left)右(right)居中(center);每个方位用空格隔开;
图片在左下位置显示:background-position:left bottom;
图片在右下位置显示:background-position:right bottom;
图片在左上位置显示:background-position:left top;
图片在右上位置显示:background-position:right :top;
图片在水平居中,垂直居中位置显示:background-position:center center;
注意:如果都是(指定)两个方位词,这两个值的前后顺序无关;如:background-position:bottom left;和background-position:left bottom;是一样的;

如果只填写了一个方位名字如下:
background-position:right;
另外一个默认居中对齐。为了更好理解尽量写全;
方法2:使用精确数值表示(就是确定了一个准确值):
第一个x坐标,第二个y坐标(第一个数值(x)水平,第二个(y)垂直);
如:background-position:10px 20px;
上面两个是精确坐标,第一个肯定是x,第二个肯定是y;

如果只指定了一个精确坐标,那另一个就是默认垂直居中的;
如:background-position:20px ;

方法3:使用混合单位(方位+数值)
精确坐标和方位名字可以混合使用,第一个是x坐标,第二个是y坐标;
如:background-position:50px top;

3.背景附着(背景图片固定还是可以滚动):

比较简单只有两个值:
背景图片固定:background-attachment:fixed;
背景图片滚动:background-attachment:srcoll;

4.背景复合写法:
以上图片属性可以简写成(并不是官方要求,):background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background:pink url() no-repeat fixed center top;
各个属性之间用空格隔开;

5.背景色半透明(注意:盒子里面的内容不会跟随透明):background:rgba(0,0,0,0.3);

rgb后面的a表示的是alpha透明度 取值范围0-1之间;
我们习惯把0.3写成.3前面的0省略掉:background:rgba(0,0,0,.3);
注意:背景透明是指盒子背景半透明,盒子里的内容不受影响;
因为是CSS3,所以低于IE9的版本是不支持的;

本文为作者彩虹海发布,未经允许禁止转载!
上一篇 下一篇
评论
暂无评论 >_<
加入评论