背景background
- 背景颜色
- 背景图片(默认平铺,不好看)
- 背景平铺
- 背景起始位置
- 背景
###背景颜色background-color(背景颜色在背景图片的下面)
- 单词:red/green/blue
- RGB颜色: rgb(0,0,0)-rgb(255,255,255)
- RGBA颜色:rgba(0,0,0,0)-rgba(255,255,255,1)
- 十六进制颜色:#000 - #fff
- hsl h:色调 s: 饱和度 l: 亮度 色调 取值范围0-360
S:Saturation饱和度 取值范围0%-100%L:Lightness亮度 取值范围0%-100% - transparent 默认透明,不继承
- inherit 继承
- rgb(0,0,0)代表黑色,rgb(255,255,255)代表白色
背景图片background-image:url(‘图片地址’)
- 初始值为none
- inherit 继承
背景图片的格式说明
| 图片格式 | 特点 |
|---|---|
| jpg | 不支持动画,不支持透明,渐进显示颜色丰富,有损 |
| png | 不支持动画,支持透明度,颜色更丰富,无损 |
| gif | 支持动画,256种颜色,2种透明度(不透明,完全透明),渐进显示 |
| webp | 支持动画,高压缩率,加载速率 |
PS.直接修改后缀名,是不行的
###背景图片重复/平铺background-repeat
背景图片默认平铺,方向从左上角到右下角
背景图片有两个方向,x轴和y轴
background-repeat: reapeat;/* 默认平铺 */
background-repeat: no-repeat;/* 不平铺,相当于是两个方向都不平铺 */
background-repeat: repeat-y;/* y轴/垂直方向平铺 */
background-repeat: repeat-x;/* x轴/水平方向平铺 */
/* 这种写法了解即可 */
background-repeat-y: no-repeat;/* 在y轴不平铺 */
background-repeat-x: no-repeat;/* 在y轴不平铺 */
/* 由于上面两条属性在不同的浏览器上不一定是存在 */
###背景图片定位/位置background-position
背景图片定位,水平向右为x轴,竖直向下为y轴
单位: px/%/em(坐标的位置,尽量不用%)
关于%的解释:(大盒子宽度-图片宽度)*百分比
描述写法:
水平:left(0%) center(50%) right(100%)
竖直:top(0%) center(50%) bottom(100%)
PS.如果只写一个,第二个默认就是center
/* 复合写法 */
/*background-position: x(水平) y(竖直); */
background-position: 0px 0px;/*x水平方向上的平移*/
/*分解写法*/
background-position-x: 10px;
background-position-y: 10px;
background-position: center;/* 描述写法 */
background-position: 50% 50%;/* 百分比 */
/*两个数值一样可以合并在一起写*/
background-position-x: 100%;/*(大盒子宽度-图片宽度)*百分比*/
/*靠近右边就是100%,靠近左边就是0%*/
/*只有一个数值时,水平方向是这个值,数值方向是center(50%)*/
/*到底可以写几个值,写几个值分别对应的是什么含义?*/
/*可以写两个值,写法如下*/
background-position: left top;/* 默认就是这个位置 */
/*水平 :left(0%) right(100%)*/
/*竖直 :top(0%) bottom(100%)*/
改变背景图片的定位,使得盒子显示图片,移动图片的背景位置,动的是图片,不是盒子,参照谁,一张图片多次使用只是改变背景定位
使用背景图片的作用是方便可以重复使用
额外知识点:
雪碧图/精灵图的优点:
可以用在不同的地方,实现一图多用,减轻服务器请求,性能优化
###背景图片缩放background-size
属性值如下:
- 百分比: 按照原始比例缩放
- 像素:直接数值+px,只有一个值,第二个默认就是auto;
- cover: 图片等比缩放知道刚好覆盖背景区域
- contain: 图片等比缩放,知道有一条边触碰到边框就停止
- 数值可以写一个/两个如果只有一个,第二个就是默认
/*依照大盒子拉伸图片,有可能存在图片变形*/
/*第一个依照宽度百分比*/
background-size: cover;/*保证原始比例*/
/*默认从左上角到x轴的边,如果y轴方向下还有空白,会继续等比例往下边拉伸*/
/*contain有点问题,小心使用*/
小图片的中心点和大盒子的中心点重合
背景图片关联依附background-attachment
属性值
- scroll:背景图片页面滚动而滚动,默认情况
- fixed:背景图片不随滚轮滚动而滚动,背景相对于浏览器窗口展示位置
背景图片展示基点background-origin
简单来说,就是背景图片从哪里开始展示
- content-box 背景图片相对于内容边框(里)
- padding-box 背景图片从内边距开始(中),默认是padding-box
- border-box: 背景图片从边框开始(外)
背景图片裁切区域background-clip
简单来说,就是背景图片从哪里开始裁切,超出的会被裁剪掉
- content-box 背景图片相对于边框(里)
- padding-box 背景图片从内边距开始(中)
- border-box: 背景图片从边框开始(外),默认是border-box
背景图片的复合型写法
background: color image repeat attchment position/size;
/*背景: 颜色 图片 重复 背景图片随文本滚动 位置/大小*/
省略的部分会被默认值代替
position和size之间要用/分割
二异性,默认两套方案
位置和大小之间要加上/,以/作为区分,/不能省
CSS3圆角
属性值的单位:
px/em/%相对于宽度或高度数值的百分比
盒子圆角border-radius
盒子的展示的时候可以选择将盒子的边角裁剪一下
border-radius: 10px;
/*这条语句同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为10px。*/
border-radius: 10%;/*水平方向和竖直方向*/
/*border-radius可以同时设置1到4个值。*/
/* 一个值 4个圆角都使用这个值*/
border-radius: 10px;
/*两个值 左上角和右下角使用第一个值 右上角和左下角使用第二个值*/
border-radius: 10px 20px;
/* 三个值 左上角使用第一个值，右上角和左下角使用第二个值 右下角使用第三个值*/
border-radius: 10px 20px 30px;
/* 四个值 依次对应左上角、右上角、右下角、左下角(顺时针)*/
border-radius: 10px 20px 30px 40px;
/* 当然还可以单独设置单个圆角 */
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。 先水平后竖直
参考资料/推荐资料:
CSS3圆角详解
小提示:
- 起名字,针对代表的内容来起名字,针对实际的项目来操作
- 页面当中就是单纯的表现效果,比如线,分隔