平凡前端之路_08.CSS3的背景效果

CSS3的背景效果

CSS3 不再局限于背景色、背景图像的运用，还可以在一个元素上设置多层背景图像。

指定背景图像 - background-image

多张不同的背景和图像用逗号隔开，先引入的图像在上一层后引入则在下一层。

background-image可能的值	描述
url	使用绝对或相对地址指定背景图像。
linear-gradient	使用线性渐变创建背景图像。
radial-gradient	使用径向渐变创建背景图像。
repeating-linear-gradient	使用重复的线性渐变创建背景图像。
repeating-radial-gradient	使用重复的径向渐变创建背景图像。

当背景颜色 - background-color 与 背景图像 - background-image 共存时，背景颜色永远在背景图像之下。

指定背景的大小 - background-size

多张不同的背景时，可以分别指定背景的大小，以逗号隔开。当只有一个值时，表示所有的背景共用相同的背景大小。

background-size可能的值	描述
length	用长度值指定背景图像大小。不允许负值。
percentage	用百分比指定背景图像大小。不允许负值。
auto	背景图像的真实大小。
cover	将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain	将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

eg: 
	background-size: 60% 120px;
	background-size: auto 120px;
	background-size: cover;
	background-size: contain;

指定背景的起始位置 - background-origin

多张不同的背景时，可以分别指定背景的起始位置，以逗号隔开。当只有一个值时，表示所有的背景共用相同的背景起始位置。

background-origin可能的值	描述
padding-box	从padding区域（含padding）开始显示背景图像。
border-box	从border区域（含border）开始显示背景图像。
content-box	从content区域开始显示背景图像。

指定背景的绘制区域 - background-clip

多张不同的背景时，可以分别指定背景的绘制区域，以逗号隔开。当只有一个值时，表示所有的背景共用相同的背景绘制区域。

background-size可能的值	描述
padding-box	从padding区域（不含padding）开始向外裁剪背景。
border-box	从border区域（不含border）开始向外裁剪背景。
content-box	从content区域开始向外裁剪背景。
text	从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

指定背景的混合模式 - background-blend-mode

多张不同的背景时，可以分别指定背景的混合模式，以逗号隔开。当只有一个值时，表示所有的背景共用相同的背景混合模式。

background–blend-mode可能的值	描述
normal	默认值。设置正常的混合模式。
multiply	正片叠底模式。
screen	滤色模式。
overlay	叠加模式。
darken	变暗模式。
lighten	变亮模式。
color-dodge	颜色减淡模式。
saturation	饱和度模式。
color	颜色模式。
luminosity	亮度模式。

背景简写 - background

CSS 可以使用背景简写 - background，用于一次性集中定义各种背景属性。

background属性值	描述
background-color	指定背景颜色。
background-image	指定背景图像。
background-repeat	指定背景如何铺排填充。
background-attachment	指定背景是随对象内容滚动还是固定的。
background-position	指定背景位置。
background-origin	指定背景的起始位置。
background-clip	指定背景的绘制区域。
background-size	指定背景的尺寸大小。

/** 约定的简写顺序 */
background: [background-color] 
			[background-image] 
			[background-repeat] 
			[background-attachment] 
			[background-position] / [ background-size] 
			[background-origin] 
			[background-clip];
/**	
	在简写形式下，background-size不会脱离background-position单独出现，
	当background-position后面接着写background-size时，以	/ 分隔    
*/
eg: 
  background: aquamarine 
              url(img.png) 
              no-repeat	/* background-repeat-x: no-repeat; background-repeat-y: no-repeat;相同可省略第二个*/
              scroll 
              center top / 50% /* background-position-x: center ; background-position-y: top;相同可省略第二个*/
              content-box 
              content-box;

如果省略某个属性不写，那么将自动取缺省值。

background-color只能设置一次。

CSS3边框图像

使用 CSS3 border-image 属性，可以给元素使用图像制作边框。

指定边框图像 - border-image-source

border-image-source可能的值	描述
url	使用绝对或相对地址指定背景图像。
linear-gradient	使用线性渐变创建背景图像。
radial-gradient	使用径向渐变创建背景图像。
repeating-linear-gradient	使用重复的线性渐变创建背景图像。
repeating-radial-gradient	使用重复的径向渐变创建背景图像。

边框图像可以使用径向渐变和颜色透明制作圆角边框。

指定边框图像切片 - border-image-slice

border-image-slice可能的值	描述
number	数字值，不带单位，代表图像中像素（如果是光栅图像）或矢量座标（如果是矢量图像）。
%	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
fill	保留边框图像的中间部分。

border-image-slice: [top] [right] [bottom] [left];
border-image-slice: [top] [right-left] [bottom];
border-image-slice: [top-bottom] [right-left];
border-image-slice: [top-right-bottom-left];

指定边框图像切片，指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格：四个角、四条边以及一个中间区域。

除非使用了补充关键词 fill，否则中间的图像部分会被丢弃。

指定边框图像宽度 - border-image-width

border-image-width可能的值	描述
1	默认值。表示相应的border-width的1倍值。
number	表示相应的border-width 的倍数。
length	规定以具体单位的值，比如像素等。
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的image slice的内在宽度或高度

border-image-width: [top] [right] [bottom] [left];
border-image-width: [top] [right-left] [bottom];
border-image-width: [top-bottom] [right-left];
border-image-width: [top-right-bottom-left];

指定边框图像四边宽度，属性可以有1到4个值（以 top 方向逆时针）。

不可使用border-width的关键字thin （细的边框）medium（中等的边框）thick（粗的边框）。

指定边框图像外延伸 - border-image-outset

border-image-outset可能的值	描述
0	默认值。不延伸。
length	规定以具体单位的值，比如像素等。
number	代表对应的 border-width 的倍数。

指定边框图像重复 - border-image-repeat

border-image-repeat可能的值	描述
stretch	默认值。拉伸图像来填充区域，不重复图像。
repeat	不进行拉伸，不凑整，重复图像。
round	round会凑整填充（进行了适度的拉伸），重复图像。
space	space会凑整填充（进行了适度的拉伸），重复图像，重复图像之间有一定的空隙。

边框图像简写 - border-image

CSS 可以使用边框图像简写 - border-image，用于一次性集中定义各种边框图像属性。

border-image属性值	描述
border-image-source	指定边框图像。
border-image-slice	指定边框图像向切片。
border-image-width	指定边框图像的宽度。
border-image-outset	指定边框图像外延伸。
border-image-repeat	指定边框图像重复。

/** 约定的简写顺序 */
border-image: [border-image-source]
 			  [border-image-slice] / [border-image-width] / [border-image-outset]
 			  [border-image-repeat];
eg:
  border-image: url(img.png)
  				50 30 20 40 fill / 1.5 1.3 1.2 1.4 / 1
  				stretch;
/*省略border-image-width*/
  border-image: url(img.png)
  				50 / / 1
  				repeat;
/*省略border-image-width、border-image-outset*/
  border-image: url(img.png)
  				50 
  				repeat;

如果省略某个属性不写，那么将自动取默认值。

CSS 知识题

题目	答案
去除文字下划线	text-decoration: none
设置文字描边属性	-webkit-text-stroke
设置颜色、图片转换成灰白效果	filter: grayscale(100%)
设置文本、图片不能被选择	user-select：none
三色法国国旗	background: linear-gradient(to left, red 33%, white 33%, white 66%, blue 66%);
设置文字不换行	white-space: nowrap
设置文字自动换行	word-wrap: break-word
设置文字强制换行	word-break: break-all