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