CSS：CSS背景及属性

CSS背景

background-color：背景颜色

属性：

transparent；背景透明

 

background-img：背景图片

属性：

url（）；

 

background-repeat：背景平铺

属性：

no-repeat；不重复

repeat；xy方向都平铺

repeat-x/-y：x/y方向平铺

 

background-position：背景位置

第一个表示水平方向； 第二个表示垂直方向；

如果两个方向的取值都为关键字（left、center、right；top、center、bottom），值的顺序可以改变；

如果只设置了一个值，那么另一个值为center；

例：background-position： 0 0；

 

固定值，允许负值；第一个值是水平值，第二个值是垂直值；

例：background-position：-100% 100%；

 

百分比：第一个是水平，第二个是垂直

（容器宽度-图片宽度）*百分比=图片最左边到容器左边的距离

（容器高度-图片高度）*百分比=图片最上边到容器最上边的距离

例：background-position：100% 100%；

 

混合写 ：固定方向 ，第一个值是水平，第二个是垂直方向；

例：background-position：-10% 200px；

 

背景图片的附着

background-attachment：

属性：

fixed：相对于视口固定

scroll：相对于本身固定

local：

 

背景简写：

background：颜色 地址 背景平铺 滚动 位置（x、y）

速记——（色子平滚位）

 

背景缩放

background-size：

固定值缩放：第一个值水平；第二个值垂直

百分比：

同上

关键字：

cover

contain

只设置一个值：

值位图片横向展示的宽度，纵向按照原图宽高比等比例缩放

 

背景颜色渐变

background

属性：

linear-gradient（color，color，color）；

linear-gradient（color，color，color,rgb(0-255，0-255，0-255)，#fffffff....）；

指定方向:

linear-gradient（to right/to top/to bottom right

，，，）；

径向渐变：

radial-gradient：（color，color，color，color）；

radial-gradient：（color %，color %，color %）；

radial-gradient：（形状-circle/..，color，color，color）

 

多背景

规则：

越靠近观者 ，越写在前面，第一张背景图会堆叠在第二张之上，第二张会堆叠在第三张之上，以此类推。

例：background：url('1.jpg') no-repeat,url('2.jpg') no-repeat;

*1.jpg 在 2.jpg之上

 

标签：repeat,color,背景,gradient,background,position,CSS,属性
来源： https://www.cnblogs.com/LIXI-/p/16486010.html