原创力文档- 1、本文档共6页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
web前端开发css3新增背景属性01
CSS301HTML5+CSS3css3背景属性
CSS301HTML5+CSS3一、CSS背景属性回顾background-imagebackground-colorbackground-repeatbackground-positionbackground-attachment
CSS301HTML5+CSS3二、CSS3新增背景属性1.设置背景尺寸background-sizebackground-size:xy; //水平垂直；值可以为像素、百分比、auto等background-size:cover; //保持宽高比不变，保证占满盒子，但是不一定能看到全部图background-contain; //保持宽高比不变，保证看清全图，但是不一定占满盒子2.多背景background-imagebackground-image:url(1.jpg),url(2.jpg); 多个背景以逗号隔开，无限个数3.背景起始区域background-originbackground-origin:border-box; //从border区域起始background-origin:padding-box; //默认值，从padding区域起始background-origin:content-box; //从内容部分起始
CSS301HTML5+CSS34.背景显示区域background-clip background-clip:border-box; //默认值，从border区域开始显示背景 background-clip:padding-box; //从padding区域开始显示背景 background-clip:content-box; //从内部区域开始显示背景background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachment
CSS301HTML5+CSS3三、新增颜色与渐变色1.新增颜色 rgba，在rgb的基础上多了一个a透明度数值，取值范围0~1，0为完全透明，1为完全不透明 hsl，H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0–360，S：Saturation(饱和度)。取值为：0.0%-100.0%，L：Lightness(亮度)。取值为：0.0%-100.0%。2.渐变色线性渐变linear-gradient()从某个方位渐变到某个方位径向渐变radial-gradient()从某个点向四周渐变在使用时需要加上–webkit-兼容前缀IE低版本兼容filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ff0000,GradientType=1);
文档评论（0）