标签：repeat color 背景 gradient background position 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。