CSS入门（背景各类属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

1、各类背景属性

1.background-image 属性为元素设置背景图像。

元素的背景占据了元素的所有尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可得到良好的视觉效果。

属性值:
url('URL') 　　指向图像的路径。
none 　　　　 默认值。不显示背景图像。
inherit 　　　 规定应该从父元素继承 background-image 属性的设置。

 

2.background-size 属性规定背景图像的尺寸。

语法:
background-size: length|percentage|cover|contain;

属性值：
length　　　　设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。若是只设置一个值，则第二个值会被设置为 "auto"。
percentage 　 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。若是只设置一个值，则第二个值会被设置为 "auto"。
cover 　　　   把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域。背景图像的某些部分也许没法显示在背景定位区域中。
contain 　　   把图像图像扩展至最大尺寸，以使其宽度和高度彻底适应内容区域。

 

3.background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

属性值:
repeat　　　　默认。背景图像将在垂直方向和水平方向重复。
repeat-x 　　 背景图像将在水平方向重复。
repeat-y 　　 背景图像将在垂直方向重复。
no-repeat 　  背景图像将仅显示一次。
inherit 　　　 规定应该从父元素继承 background-repeat 属性的设置。

 

4.background-attachment 属性设置背景图像是否固定或者随着页面的其他部分滚动。

属性值:
scroll 　　 默认值。背景图像会随着页面其他部分的滚动而移动。
fixed 　　  当页面的其他部分滚动时，背景图像不会移动。
inherit 　　规定应该从父元素继承 background-attachment 属性的设置。

 

5.background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像若是要重复，将从这一点开始。

提示：您须要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工做。

属性值：

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

（若是您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。）

x% y%

（第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。若是您仅规定了一个值，另外一个值将是 50%。）

xpos ypos

（第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其余的 CSS 单位。若是您仅规定了一个值，另外一个值将是50%。您能够混合使用 % 和 position 值。）

2、关于垂直对齐方式和过渡属性

1.vertical-align 属性设置元素的垂直对齐方式。

属性值:

baseline 　　　　默认。元素放置在父元素的基线上。

sub 　　　　　　垂直对齐文本的下标。

super 　　　　　垂直对齐文本的上标

top 　　　　　　把元素的顶端与行中最高元素的顶端对齐

text-top　　　　把元素的顶端与父元素字体的顶端对齐

middle　　   　　把此元素放置在父元素的中部。

bottom　　  　　把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 　　把元素的底端与父元素字体的底端对齐。

length

% 　　　　　　  使用 "line-height" 属性的百分比值来排列此元素。容许使用负值。

inherit 　　　　  规定应该从父元素继承 vertical-align 属性的值。

2.transition 属性是一个简写属性，用于设置四个过渡属性：

语法：

transition: property duration timing-function delay;

属性值:

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果须要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果什么时候开始。

 

(1).transition-property表明的属性值以及相关用法(规定设置过渡效果的 CSS 属性的名称)

语法:
transition-property: none|all|property;

属性值:

none 　　 没有属性会得到过渡效果。
all 　　　  全部属性都将得到过渡效果。
property   定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

 

(2).transition-duration表明的属性值以及相关用法(规定完成过渡效果须要多少秒或毫秒)

语法:
transition-duration: time;

属性值:

time
规定完成过渡效果须要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

 

(3).transition-timing-function表明的属性值以及相关用法(规定速度效果的速度曲线)

语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值:

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease 规定慢速开始，而后变快，而后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）

ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义本身的值。可能的值是 0 至 1 之间的数值。

 

(4).transition-delay表明的属性值以及相关用法(规定过渡效果什么时候开始)

语法:

transition-delay: time;

属性值:

time 规定在过渡效果开始以前须要等待的时间，以秒或毫秒计。

3、渐变

1.什么是渐变？

两种或者多种颜色间平滑度过的效果。

2.分类：

(1).线型渐变
(2).径向渐变
(3).重复渐变 加上 repeating

3.渐变的组成

(1).线型渐变

色标：决定了渐变的每种颜色及出现的位置
每一个渐变效果都是由多个色标组成（2个以上）

语法：linear-gradient([<angle(方向)> | to <side-or-corner(角度大小)>]? , <color-stop-list(起始颜色)>)

属性值:

 

angle:

to top　　　　　　从下往上

to bottom　　　　 从上往下

to left　　　　　　从右往左

to right　　　　　 从左往右

to top right　　　 从左下往右上

to top left　　　　从右下往左上

to bottom right　  从左上往右下

to bottom left　　 从右上往左下

 

side-or-corner:

接受一个表示角度的值（可用的单位deg、rad、grad或turn）

0deg(度)　对应　to top
90deg　　对应　to right
180deg　 对应　to bottom
270deg　 对应　to left

中途省略的是渐变颜色的第一个颜色为起始颜色(若只有一个颜色值则这个颜色为终止点的颜色)

在第一个和最后一个颜色之间的颜色为中间色，全部颜色会以设定的方向在未给予颜色区域大小的时候平均渐变颜色。

 

color-stop-list:<color-stop>=<color>I <dength>I <percentage>]

接受一系列颜色节点（终止点的颜色）

<color>：指定颜色。
<length>：用长度值指定起止色位置。不容许负值
<percentage>：用百分比指定起止色位置。

 

(2).径向渐变

语法：radial-gradient([side] at [position]? , <color-stop-list(起始颜色)>)

属性值:

size ：

圆的半径 单位为px

position:x y

接受一个表示圆心的位置的值（可用的单位:px、百分比、top center bottom left right）

中途省略的是渐变颜色的第一个颜色为起始颜色(若只有一个颜色值则这个颜色为终止点的颜色)

在第一个和最后一个颜色之间的颜色为中间色，全部颜色会以设定的方向在未给予颜色区域大小的时候平均渐变颜色。

 

color-stop-list:<color-stop>=<color>I <dength>I <percentage>]

接受一系列颜色节点（终止点的颜色）

<color>：指定颜色。
<length>：用长度值指定起止色位置。不容许负值
<percentage>：用百分比指定起止色位置。

(3).重复渐变

原有基础前面加上 repeating

repeating-linear-gradient()(重复的线性渐变)

语法跟上面的 linear-gradient() 是同样的。

只不过 linear-gradient 后面没填充完的 地方用了最后一个颜色填充。

repeating-linear-gradient 他是用填充好的效果，重复填充 还没填充的地方

 

repeating-radial-gradient()(重复的镜像渐变)

语法和上面同样。

只不过 radial-gradient 后面没填充完的 地方用了最后一个颜色填充。

repeating-radial-gradient 他是用填充好的效果，重复填充 还没填充的地方

 4、雪碧图和精灵图

雪碧图(将不少不少的小图标放在一张图片)、精灵图(通过background-position)
方法：

1.运用PS切图，把几个部分粘贴到一个图层，记下每一个图片的大小，同时大的粘贴板宽取全部图宽的和，高取全部图中的最大值
2.运用背景图的方式插入，设置每一个图片的div大小，同时经过调整图片位置background-position的方式达到准确添加背景图的目的

好处：

1.加快加载速度
2.后期维护简单
3.能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。
4.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了
5.更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便

缺点：

一、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现没必要要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片若是不够宽，很容易出现背景断裂； 
二、至于可维护性，这是通常双刃剑。可能有人喜欢，有人不喜欢，由于每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。并且算图片的位置（尤为是这种上千px的图）也是一件颇为不爽的事情。固然，在性能的口号下，这些都是能够克服的。 
三、因为图片的位置须要固定为某个绝对数值，这就失去了诸如center之类的灵活性。 
四、前面咱们也提到了，必须限制盒子的大小才能使用CSS Sprites，不然可能会出现出现干扰图片的状况。这就是说，在一些须要非单向的平铺背景和须要网页缩放的状况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样能够保持有限度的缩放。

以上“雪碧图与精灵图”解释转自CSDN博主「_52赫兹_」的原创文章

原文连接：https://blog.csdn.net/MYTLJP/article/details/78209698