第9章 颜色,背景和渐变
9.1 颜色
还记得你第一次修改网页的颜色是什么时候吗?
呵呵,就好像两个相处很久的情侣,在某一天午饭躺在沙发上看电视的时候,对方突然问你,你还记得我们第一次一起坐公交车是什么时候吗?一股甜蜜回忆的味道,有木有?
9.1.1 前景色
一般建议同时设置前景色和背景以,以防止用户代理的默认颜色影响.
这个其次非常有必要,就设置在根节点上,反正前景色是会继承的,背景色设置了根节点,子节点默认是透明,相当于所有的都有了固定背景色
9.1.2 对边框的影响
currentColor: 边框默认取前景色
9.1.3 对表单元素的影响
表单元素也是置换元素,CSS无法装饰置换元素的内容.
这就是为什么在项目中,有时候直接设置radio或select的值无效的原因,并且不同的浏览器表现不一致.
9.1.4 继承颜色
...这没啥好记的
9.2 背景
9.2.1 背景色background-color
transparent: 默认是透明色
配合背景色和padding可以实现多边框效果
9.2.2 裁剪背景background-clip
- border-box: 默认值,背景到边框下面
- padding-box: 背景到内边距下面
- content-box: 背景只在内容区里面
- text: 背景出现在文字后面,类似于镂空效果,不过需要加前缀,-webkit-background-clip
注意:
- 对根元素无效
- 绘制后还会再由圆角裁剪一次
9.2.3 背景图background-image
通常,在指定背景图的时候要同时指定一个背景色,以防止图片加载不出来还有颜色做降级处理
- 背景相关的属性都无法继承
- 有alpha通道的图像格式(png/svg),背景图和背景色会融合
9.2.4 背景定位background-position
指定源图像的具体位置,只适用于块级元素和置换元素 jsfiddle.net/ranwawa/up2…
关键字
- top right bottom left center
- 前面一个指定横向位置
- 后面一个指定纵向位置
- 如果只有一个,纵向默认center
百分数值 百分值是取的图像的某个点,对应背景上的某个点的位置
- 50%,把源图像的中心点与元素背景的中心点对齐相当于center center
- 0%,把图像的左上角的点,对准背景的左上角相当于 left top
- 如果只提供一个值,纵向默认是50%
- 当图片和背景和尺寸不是等比例的时候,计算起来就非常复杂了,所以少用为妙
长度值 源图像左上角相对元素背景左上角的偏移量,即把源图像的左上角和声明的点对齐
- 注意和关键字混用时的顺序问题,为了规范,书写的时候就别混写是最好的
负值 通过设置负值,可以把图像拉到背景之外,以显示其某一部分.
改变偏移边
即给偏移量指定边界关键字
- 一个边界关键字对应一个偏移距离
- 如果一个方向的偏移量为0,可将其省略
- 只能相对上右下左边偏移,不能使用center
9.2.5 改变定位框background-origin
计算源图像的位置时,以什么的边界为基准,是指背景定位区域.注意和background-clip的区别,后者是背景绘制区域
- 默认是相对于内边距左上角绘制
9.2.6 背景重复方式background-repeat
第一个值应用于横向,第二个值用于纵向,默认情况下,背景图从元素的左上角开始显示
- repeat-x
- repeat-y
- repeat
- space 调整间距显示整数个
- round 缩放背景图放整数个
位置对重复的影响
源图像会先放到background-position的位置旋转,然后再开始重复
单排和取整
- space: 确定沿某一轴能完全重复多少次,然后从背景区域的一边到对边均匀排列图像
- 和repeat的区别在于这个不裁剪图像
- 和round的区别在于这个不缩放图像
- 如果在某个方向放不下,就只出现一次
- 如果出现多次,background-position将被忽略
- round 重复图像过程中,可能会调整图像大小
- 只有从四个角开始排列,才不会被裁剪,从中间开始可能被裁剪
平铺和裁剪
space和around是相对于背景定位区域计算的,即background-origin,所以在开发过程中,一定要多注意它和background-clip的区别
9.2.7 背景粘附backgroun-attachment
- fixed: 源图像不随文档滚动,源图像的位置由视区的尺寸确定
- 浏览器容器发生变化后,背景图的位置也会发生变化
- local: 背景图粘附到局部上下文
- 仅当元素的内容足够滚动时,背景图才会随内容一起滚动
- 父元素overflow:scroll时,会随局部上下文一起滚动
- scroll: 滚动
- 默认是随文档一起滚动
- 父元素overflow:scroll时,会固定在指定位置
9.2.8 控制背景尺寸background-size
其行为和设置图片的宽高差不多
- 声明的百分数值相对背景定位区域计算,即
background-origin - 使用auto时
- 图片含有高宽比,一轴为auto,则根据另一轴的尺寸和高宽比计算
- 如果没获取到高宽比,为auto的轴长度为原始尺寸
- 如果没高宽比,也没固定尺寸,如svg,则设置为100%
覆盖和容纳
- cover: 允许部分图像超出背景绘制区域,即
background-clip,铺满整个背景 - contain: 允许缩放图像,使短边完全显示出来,不会裁剪
如果背景图可能被缩放,而且不是照片的话,强烈建议使用SVG
9.2.9 简写
看到简写方式就有点烦,不过背景用的多,且这个规则也还简单,就记录一下
- 如果同时为
background-origin和background-clip提供值,前一个分配给orign,后一个分配给clip background-size必须紧随background-position且以/分开- 横向值在前,纵向值在后
- 简写时,省略的值使用默认值
- background写在后面的话,会覆盖前面的值
background: url(yy.png) top left/50% 50% paddin-box content-box white repeat-y fixed;
9.2.10 多个背景
除background-color外的所有背景属性都接受以逗号分割的多个值,背景色最好是放在终结背景层上面.
- 如果为第一个背景层添加了纯色背景,它将覆盖随后 的全部背景层
补足缺少的值
- 如果有多个背景图,但是相应的属性比背景图少,则会自动重复
- 如果相应属性比背景图多,则会忽略
background-image不会随其他属性重复
9.3 渐变
渐变实际上是图像,除了没有尺寸在auto时是100%,其他与图像一模一样
9.3.1 线性渐变liner-gradient
线性渐变是指沿线性向量(即梯度线)填充得到的渐变 = 可选的方向 + 色标,中色点 + 结尾色标
- 默认方向是
bo bottom即180度 - 方向是顺时针,从0开始,指向和时针一样
渐变颜色
- 可以是带alpha通道的值
- 也可以是transparent
- 未指明色票的位置时,各色票均匀分布
定位色标
格式是 = 颜色 + 位置
- 色标不到梯度线末尾,颜色就会一直延伸下去
- 色标超出梯度线末尾/开始位置,颜色就会在梯度线的末尾/开始结束
- 第一个颜色没有位置时,位于梯度线开头
- 最后一个颜色没有位置时,位于梯度线末尾
- 后面色标位置小于前面色标位置,则会取前面那个色标位置
设置中色点
默认模式下,两个色标之间的混合模式是线性的,混合是恒定的线性累进过程,中点在50%处.通过中色点可以修改累进的中点位置.
梯度线原理
- 先根据指定的角度放置梯度线
- 梯度线进过线性渐变图像的中心点
- 距梯度线方向最远的角做梯度线的垂线,与梯度线的交点是起点
- 距梯度线方向最近的角做梯度线的垂线,与梯度线的交点是终点
- 梯度线上各点的颜色,会延垂线方向向外延伸
注意: to top right这种指向右上象限的,是根据斜角连线的垂直线来确定梯度线的
9.3.2 径向渐变radial-gradient
径向渐变和线性渐变的原理差不多.惟一要注意的就是circle和ellipse之间的区别.并且书上有说,性能开销特别大,所以就有很好的理由不做笔记了.有需要用到的时候再来翻文档
9.3.3 处理渐变图像
通过渐变生成图像后,可以用9.2里面的属性来进行配置,可以实现各种复杂效果
9.3.4 循环渐变repeating-linear-gradient
- 最后一个色标的长度值必填,定义图案的整个长度
- 最后一个色标的颜色值必须与第一个色标的颜色值一致
- 还要注意线渐循环渐变和径向循环渐变之间的区别
9.4 盒子投影box-shadow
- 糊糊距离: 指定给模糊留出多少空间
- 展开距离: 改变投影尺寸
- 正值在模糊前放大投影
- 负值模糊后缩小投影
- inset: 在柜体内部渲染投影
- 可以使用任意多个投影,各投影之间用逗号分开
