1.4.5背景

2016-03-05 本文已影响0人每日活菌

background-color

background-color:#ff0000
红色
background-color:rgb(255,0,0)
红色
background-color:rgba(255,0,0,0.5)
红色半透明
background-color:transparent
默认颜色，全透明

background-image

<bg-image>[,<bg-image>]*
可以有多种
<bg-image>=<image>|none
通过url()，引入背景图片
url("http://163.com/images/x.png")绝对地址
url("/images/x.png")相对与跟路径
url("…/images/x.png")相对与css文件所在路径,除了双引号可以用单引号，引号也可以不写
background-imge:url(red.png);
单个菱形图片，平铺
background-imge:url(red.png),url(blue.png);
background-color:green;

屏幕快照 2016-03-05 上午10.39.33.png

先写的颜色在最上面，可有多张背景图片。

background-repeat

<repeat-style>[,<repeat-style>]*
多个属性，对应的前面引入的图片
<repeat-style>=repeat-x|repeat-y|
只沿x轴平铺，只沿y轴平铺
[repeat|space|round|no-repeat]{1,2}
repeat既沿x轴平铺也沿y轴平铺。space在平铺的同时，每张图片之间会留出空隙来。round在平铺的同时，图片会进行伸缩。no-repeat不平铺只出现一次。

background-image:url(red,png);
background-repeat:repeat-x;

屏幕快照 2016-03-05 上午10.59.08.png

background-image:url(red,png);
background-repeat:repeat-y;

屏幕快照 2016-03-05 上午10.59.24.png

background-image:url(red,png);
background-repeat:space;

屏幕快照 2016-03-05 上午10.59.36.png

正好可以容下，不会出现菱形被截掉

background-image:url(red,png);
background-repeat:round;
不留空隙且，没有菱形被截掉，不一定是等比缩放的，可能被压扁或者拉长。
background-image:url(red,png);
background-repeat:no-repeat;
不平铺
background-image:url(red,png);
background-repeat:no-repeat repeat;
表示的时两个轴的平铺形式，第一个值表示x轴不平铺，第二个值表示y轴平铺
background-image:url(red,png),url(blue.png);
background-repeat:no-repeat repeat;
蓝色图片与红色图片平铺方式相同。
background-image:url(red,png),url(blue.png);
background-repeat:no-repeat repeat,repeat-x;
红色图片y轴平铺，蓝色图片x轴平铺

background-attachment

<attachment>[,<attachment>]*
<attachment>=scroll|fixed|local
滚动，

background-image:url(red,png);
background-attachment:scroll;
背景图片不动只有内容滚动
background-image:url(red,png);
background-attachment:local;
内容跟背景跟着滚动条一起动

background-position

<position>[,<position>]*

<position>=[left|center|right|top|bottom|<percentage>|<length>]|
[left|center|right|<percentage>|<length>] [top|center|bottom|<percentage>|<length>]|
[center|[left|right] [<percentage>|<length>]?]&&[center|[top|bottom] [<percentage>|<length>]?]

以"|"分三段
第一段可以写一个值，这个值是关键词或是某一个具体的词
第二段用空格空开可以写两个值，第一个值x轴的位置，第二个值y轴的位置。
第三段可以写关键词加上百分比，x轴y轴并且都可以写两个

background-image:url(red.png);
background-repeat:no-repeat;
background-position:0 0;
引入一张图片，默认值为0 0
background-image:url(red.png);
background-repeat:no-repeat;
background-position:10px 20px;
x轴向右偏移10px，y轴向下偏移20px
background-image:url(red.png);
background-repeat:no-repeat;
background-position:20% 50%;
图片的百分比的位置和容器的百分比的位置对应，既整个容器的百分数
background-image:url(red.png);
background-repeat:no-repeat;
background-position:50% 50%;
居中效果
background-image:url(red.png);
background-repeat:no-repeat;
background-position:center center;
居中效果
同理，
left:x轴上的0%
right:x轴上的100%
top:y轴上的0%
bottom:y轴上的100%
background-image:url(red.png);
background-repeat:no-repeat;
background-position:right;
当只有right一个值时，表示水平在最右边，垂直居中。默认值居中
background-image:url(red.png);
background-repeat:no-repeat;
background-position:right 10px top 20px;
距离右边10px，距离上边20px。其中right与top为参照物

linear-gradient()

按钮的渐变背景
[[<angle>|to<side-or-corner>],]?<color-stop>[,<color-stop>]+
是一个角度或者时一些线性的方向，到一个边或一个角。然后写一些颜色的断点
<side-or-corner>=[left|right]||[top|bottom]

<color-stop>=<color>[<percentage>|<length>]?
一个color值加上它所停在的位置

background-image:linear-gradient(red,blue);
只写两个颜色，从红色渐变到了蓝色，默认值从top到bottom
background-image:linear-gradient(to top,red,blue);
从红色渐变到了蓝色,从下往上
background-image:linear-gradient(to right bottom,red,blue);
从红色渐变到了蓝色,从左上角到右下角
background-image:linear-gradient(0deg,red,blue);
0度，从下往上的渐变
background-image:linear-gradient(45deg,red,blue);
45度，沿45度直线由红到蓝渐变
background-image:linear-gradient(red,green,blue);
红色，绿色，蓝色渐变。位置缺少时会自动平分
background-image:linear-gradient(red,green 20%,blue);
红绿蓝，绿色在从上到下20%的位置开始渐变

radial-gradient()

径向渐变，圆或椭圆沿半径往外散发

[[circle||<length>] [at<position>]?,|
[ellipse||[<length>|<percentage>]{1,2}] [at <position>]?,|
[[circle|ellipse]||<extent-keyword>][at<position>]?,|at<position>,
]?<color-stop>[,<color-stop>]+

第一段，圆，半径长度，圆心位置
第二段，椭圆，两个半径长度或百分比，圆心位置
第三段，圆形或椭圆形+关键字+圆心位置
关键字
<extent-keyword>=closest-side|farthest-side|closet-corner|farthest-corner
离圆心最近的边，离圆心最远的边，离圆心最近的角，离圆心最远的角

background-image:radial-gradient(closest-side,red,blue);
background-image:radial-gradient(circle,red,blue);
background-image:radial-gradient(circle 100px,red,blue);
background-image:radial-gradient(red,blue);
background-image:radial-gradient(100px 50px,red,blue);
background-image:radial-gradient(100px 50px at 0 0,red,blue);
background-image:radial-gradient(red,green20%,blue);

repeat-*-gradient

渐变的重复，循环重复

background-image:repeating-linear-gradient(red,blue 20px,red 40px);
background-image:repeating-radial-gradient(red,blue 20px,red 40px);

例：添加一个背景菱形
background-image:url(red.png);
background-repeat:no-repeat;
background-image:right bottom;
它在padding－box的右下角出现，没有在content-box的右下角

background-origin

设定背景图片0 0坐标与百分百坐标的区域，希望它显示在哪个区域
默认值为padding-box
<box>[,<box>]*
<box>=border-box|padding-box|content-box

background-image:url(red.png);
background-image:no-repeat;
background-origin:content-box;

background-clip

裁剪
<box>[,<box>]*
<box>=border-box|padding-box|content-box
默认值为border-box在其外面进行裁剪

background-image:url(red.png);
background-clip:content-box;
background-origin:content-box;

0 0点在content-box,裁剪区域也在content-box以外

background-size

<bg-size>[,<bg-size>]*
<bg-size>=[<length>|<percentage>|auto]{1,2}|cover|contain
可以写两个值，宽度与高度，一个值时，剩下的值默认为auto
或写关键字cover和contain

background-image:url(red.png);
background-repeat:no-repeat;
background-position:50% 50%;
background-size:auto;
宽高为默认自动
background-size:50% 50%;
或为整个宽高的一半
background-size:cover;
让图片撑满整个容器
background-size:contain;
图片尽可能的大，宽高都不能超过容器。

background

[<bg-layer>,]*<final-bg-layer>
背景图片层可多个，背景颜色层
<bg-layer>=<bg-image>||<position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box>
注意：<bg-size>前要加“／”以区分position与bg-size

<final-bg-layer>=<bg-layer>||<'background-color'>
背景颜色出现在所有背景图片层之后，例如两个背景图片则在第二个背景图片层后加背景颜色。
例;
background:
url(red.png) 0 0/20px 20px no-repeat
,url(blue.png) 50% 50%/contain no-repeat content-box green;