基本信息
文件名称:web前端css样式背景渐变.pptx
文件大小:77.66 KB
总页数:8 页
更新时间:2024-10-28
总字数:约小于1千字
文档摘要

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