web前端css样式背景渐变.pptx

web前端开发-H5背景渐变 主讲人：追梦老师01

本节课内容01HTML5+CSS3CSS背景属性复习CSS3新增背景属性

背景01HTML5+CSS3background: background-color:背景颜色 background-image:背景图片 background-repeat:背景重复 background-position:背景定位 background-attachment:背景固定(scroll/fixed)

背景01HTML5+CSS3background-size背景尺寸 background-size:xy background-size:100%100% background-size:cover比例放大background-size:contain包含（图片不溢出）

背景01HTML5+CSS3多背景background:url()00,url()0100%;

背景01HTML5+CSS3颜色渐变background-image:线性渐变：linear-gradient(起点/角度，颜色位置，...,) 起点：left/top/right/bottom/lefttop......默认top 角度：逆时针方向0-360度 颜色位置：red50%,blue100%(红色从50%渐变到100%为蓝色)IE低版本渐变(滤镜)：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ff0000,GradientType=1);

背景01HTML5+CSS3颜色渐变径向渐变：radial-gradient(起点(圆心位置),形状/半径/大小，颜色1，颜色2) 起点：left/top/right/bottom或具体值/百分比 形状：ellipse(椭圆)、circle(正圆)

付出不亚于任何人的努力!持之以恒End