CSS3属性之background

接上，background来咯

1.box-shadow

（1）外阴影

（2）内阴影

（3）扩展玩法，传无数个参

2.background-image

3.background-size

4.background-position

5.background-repeat

6.background-origin

7.background-clip

8.background-attachment

1.box-shadow

（1）外阴影

box-shadow有五个参数，接下来一一介绍，首先写这样一个小方块

<!DOCTYPE html>
<html lang="en">
<head><style>body {background: #000;}div {width: 100px;height: 100px;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);background: transparent;border:2px solid #fff;box-shadow: 0px 0px 0px 0px #fcc;}</style>
</head>
<body><div></div>
</body>
</html>

将box-shadow的前4个参数值设为0，然后在控制台改变其参数值，第五位参数值是颜色

第一位：阴影的水平偏移量

第二位：阴影的垂直偏移量

第三位：blur

即，可以看到，当它的值增加时，其宽高超出了100px，即它是由边界同时向里外两个方向进行模糊的；其值越大，背景颜色透过来的越多，当其值增加到一定程度，就看不到了

第四位：spread

可以看到，它的传播距离同时向4个边增加

（2）内阴影

内阴影需在前标注inset，如下

<!DOCTYPE html>
<html lang="en">
<head><style>body {background: #000;}div {width: 100px;height: 100px;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);background: transparent;border:2px solid #fff;box-shadow:inset 0px 0px 0px 0px #fcc;}</style>
</head>
<body><div></div>
</body>
</html>

后续参数与外阴影相同，blur参数中，还是由边界向两边模糊，但是从边界外看不出来

（3）扩展玩法，传无数个参

阴影就是由光直线传播造成的，那现实生活中可以有很多光源，造成阴影重叠，CSS3自然也可实现啦，如下例

<!DOCTYPE html>
<html lang="en"><head><style>body {background: #000;}div {width: 100px;height: 100px;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);background: transparent;border: 2px solid #fff;box-shadow: 3px 0px 5px 0px #f99,-3px 0px 5px 0px #9f9,0px 3px 5px 0px #99f,0px -3px 5px 0px #ff9;}</style>
</head><body><div></div>
</body></html>

【结果】产生了四个阴影，理论上box-shadow可以传无限个参数

2.background-image

【例】添加一张背景图片

<!DOCTYPE html>
<html lang="en">
<head><style>div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);background-image: url(./img/section1.jpg);background-size: 300px 200px;}</style>
</head>
<body><div></div>
</body>
</html>

【结果】

背景图片可以添加很多张，需要其他属性配合才能出效果，先介绍其他属性再举例吧

3.background-size

作用：设置背景图片的尺寸，可以填像素值，也可以填cover，contain

【例1】cover：不改变图片比例的前提下，用一张图片完完整整的填充整个容器，但是图片的某些部分可能无法显示在背景中

<!DOCTYPE html>
<html lang="en">
<head><style>div {width: 300px;height: 150px;border: 2px solid #000;background-image: url(./img/bg2.jpg);background-size: cover;background-repeat: no-repeat;}</style>
</head>
<body><div></div>
</body>
</html>

【结果】

【例2】contain：不改变图片的比例的前提下，让容器包含一张完整的图片，但是可能有部分容器填充不到。将上例background-size属性值改为contain

【结果】

4.background-position

作用：设置每张背景图片的位置，相对于background-origin（第6条）进行定位，例如：设置background-origin：border-box，则该背景图片相对于border开始定位

【例1】

<!DOCTYPE html>
<html lang="en">
<head><style>body {background-color: #000;}div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);background-origin: border-box;background-position: 20px 20px;}</style>
</head>
<body><div></div>
</body>
</html>

【结果】

5.background-repeat

作用：当背景图片的大小不足以填充整个背景时，该属性的属性值可以决定如何填充背景，属性值有repeat（默认值），no-repeat，round，space（其填充方式与border-image-repeat相同，上篇有讲，不做赘述，感兴趣可以自己试一下，蛮好玩的），repeat-x（水平方向平铺），repeat-y（垂直方向平铺）

【例1】no-repeat及前几个属性的举例

<!DOCTYPE html>
<html lang="en">
<head><style>body {background-color: #000;}div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);background-image: url(./img/bg1.jpg), url(./img/bg3.jpg);background-size: 150px 200px;/* left top */background-position: 0 0, 150px 0; background-repeat: no-repeat;}</style>
</head>
<body><div></div>
</body>
</html>

【结果】

【注】

background-repeat可传两个参数，第一个决定水平的平铺方式，第二个决定垂直方向的平铺方式
若属性值为repeat-x或repeat-y，则只可传一个参数，另一个默认为no-repeat。

6.background-origin

三个属性值：border-box，padding-box，content-box，决定了背景图片从哪里开始填充

【例1】border-box：从border的左上角开始填充到border的右下角

<!DOCTYPE html>
<html lang="en">
<head><style>body {background-color: #000;}div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);background-origin: border-box;}</style>
</head>
<body><div></div>
</body>
</html>

【结果】可以看到border下有背景图片

【例2】padding-box（默认值）：从padding的左上角填充到border的右下角，将上【例1】background-origin的属性值修改为padding-box

【注】之所以border下有背景图片是因为没有设置repeat属性，下面设置background-repeat:no-repeat康康效果

【例3】content-box：从content左上角开始填充到border的右下角，将【例1】background-origin的属性值修改为content-box

7.background-clip

三个属性值：border-box，padding-box，content-box，text，该属性可以使背景图片不填充属性值外的盒模型

【例1】content-box

div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);background-origin: padding-box;background-clip: content-box;
}

【结果】

【例2】text：背景图片填充文字，该属性值与-webkit-text-fill-color配合使用

<!DOCTYPE html>
<html lang="en">
<head><style>* {margin: 0;padding: 0;}body {background-color: #000;font-size: 0;}
div {width: 400px;height: 200px;line-height: 200px;text-align: center;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);font-size: 100px;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-fill-color: transparent;
}</style>
</head>
<body><div>火影忍者</div>
</body>
</html>

【结果】

8.background-attachment

三个常用属性值：scroll，local，fixed

【例1】scroll：相对于内容区定位，相当于position：fixed

<!DOCTYPE html>
<html lang="en">
<head><style>div {width: 500px;height: 500px;position: absolute;top: calc(50% - 250px);left: calc(50% - 250px);border: 2px solid #424242;border-radius: 10px;background-color: #fee;color: #424242;text-indent: 28px;overflow: scroll;background-image: url(./img/bg6.jpg);background-size: 200px 300px;background-repeat: no-repeat;background-position: 150px 100px;background-attachment: scroll;}</style>
</head>
<body><div><p> 金香很吃力的把两扇沉重的老式拉门双手推到墙里面去。门这边是客厅。墙上挂着些中国山水画，都给配了镜框子，那红木框子沉甸甸的压在轻描淡写的画面上，很不相称，如同薄纱旗袍上滚了极阔的黑边。那时候女太太们刚兴着用一种油漆描花，上面洒一层闪光的小珠子，也成为一种兰闺韵事。这里的太太就在自己鞋头画了花，沙发靠垫上也画了同样的花。然而这一点点女性的手触在这阴暗的大客厅里简直看不到什么。</p><p>门那边，陈宝初陈宝余兄弟俩在那里吃早饭。两人在他们姊夫家里住了一暑假，姊姊姊夫是太太老爷，他们便被称作大舅老爷二舅老爷，虽然都还是年纪很轻的大学生，宝初今年刚毕业。这一天，宝余只管把熏鱼头肉骨头抛到桌子底下喂狗吃，宝初便道：“你不要去引那个狗了！把这地方糟蹋得这样子！”宝余笑道：“你看这小家伙多有意思！”他见那丫头金香走了过来，越发高兴起来了，撕了一块油鸡逗的那狗直往桌上蹦，笑道：“金香你看你看！”金香一眼瞥见宝初的脸色有点不快，便道：“哟！这狗得洗澡了！”一面又去拿扫帚畚箕，说道：“我来扫扫，是不能再给它吃了！”她一说，宝余就歇了手，讪讪的自去吃粥。</p><p>金香扫了地，又去捉狗，说：“去洗澡去。”这狗是个黑白花的叭儿狗，脸是白的，头上有些黑毛丝丝缕缕披下来，掩没了上半个脸，活像个小女孩子，瞪着大眼珠子在那前溜海后面偷偷的看人。</p><p>金香把狗抱在怀中，宝余便凑上前去捞捞狗的下颔，笑道：“你看我们多美啊，前溜海儿……还带着这眼神儿，就跟你一样，就苦脸上没搽胭脂。”金香抽身待走，却被宝余一只手指钩住了狗的领圈。她道：“二舅老爷，你别瞎闹了。”宝余道：“怎么，你不搽胭脂的么？”金香道：“谁搽胭脂呢？”然而她的确是非常红的“红颜”，前溜海与浓睫毛有侵入眼睛的趋势，欺侮得一双眼睛总是水汪汪的。圆脸，细腰身，然而同时又是胖胖的。穿着套花布的短衫长裤，淡蓝布上乱堆着绿心的小白素馨花。她搭讪着就把狗抱走了，自言自语道：“狗几天不洗就要虼蚤多了！”宝余赶在她后面失惊打怪的叫了声：“喏，真的，这多么虼蚤！”金香倒给他吓了一跳，一回头，他便在她背上摸了一把，道：“喏，在这儿！在这儿！”金香恨道：“二舅老爷真是！”宝余涎着脸笑道：“真是怎么？真是好，是罢？”金香早走了，也没听见。</p><p>宝初先一直没做声。虽说是自己的兄弟，究竟是异母的。两人同是庶出，宝初的母亲死得早，那时候宝余的母亲还只有一个女儿，就把宝初拨给她，归她抚养了。后来又添了宝余。在这样的环境里长大的宝初，本来就是个静悄悄的人，今年这一夏天过下来，更沉郁了些，因为从读书到找事，就像是从做女儿到做媳妇，对于人世的艰难知道得更深了一些。今天他实在有点看不过去了，金香一走他就说宝余：“二弟，你真是的，总这样子跟金香油嘴滑舌的——叫人看不起！让姊夫听见了，不大好。”宝余笑道：“你怎么啦？你总是看不得我跟金香说话，一来就这么</p></div>
</body>
</html>

【结果】

【例2】local：相对于文字定位，相当于position：absolute，将【例1】background-attachment属性值改为local

【结果】

【例3】fixed：相对于可视区定位，将【例1】background-attachment属性值改为fixed，且设置body的height值为1900px（为了显示滚动条）

【结果】

终于写完了，读API没get到的点处理完了，不过还有一个遗留问题，关于渐变色的，linear-gradient和radial-gradient，下篇讲吧，这篇内容太多了