黑马程序员技术交流社区
标题: Background的语法 [打印本页]
作者: 刘芳宪 时间: 2019-10-18 19:10
标题: Background的语法
本帖最后由 刘芳宪 于 2019-10-18 19:21 编辑
Background
background 简写属性在一个声明中设置所有的背景属性。
Background属性：
一. background-color:颜色值；
颜色值格式：1.十六进制格式：#d8001c;
2.rgb格式：rgb(216，0，28);
注：rgba格式：rgba(216，0，28，0.6、5);中的a代表的是透明度，值是
0-1之间的小数，0代表完全透明，1代表完全不透明。
二. background-image:url(背景图片的路径及全称)；
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
显示原则：
2.1．容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2.2．容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
2.3．容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
三. background-repeat:no-repeat/repeat/repeat-x/repeat-y;
3.1.no-repeat:不平铺
3.2.repeat：平铺
3.3.repeat-x：横向平铺
3.4.repeat-y ：纵向平铺
四. background-attachment:scroll(滚动)/fixed(固定);
4.1.fixed固定，随内容一块滚动；
4.2.scroll:不随内容一块滚动。
五. background-position:值1 值2;
选择符{background-position:left/center/right/数值 top/center/bottom/数值;}
说明：
两个值 ：值1：表示水平位置的值，值2：表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
向右方向，向下方向都是正值。
水平方向上的对齐方式（left/center/right）或值
垂直方向上的对齐方式(top/center/bottom)或值
六. background-size: 数值/auto/cover/contain；(css3新增属性)
6.1 数值(length)：用长度值指定背景图像大小。不允许负值。用百分比指定背景图像大小。不允许负值 。( background-size: w h; )
6.2 auto：背景图像的真实大小。（默认值）
6.3 cover：当背景图大于容器时，背景图超出容器的部分会被裁剪掉，不显示，只显示容器中的部分。但背景图不会失真。
当背景图小于容器时，背景图会以盒子最长边为准等比放大到填充满整个盒子，盒子不会有留白，但依然只能显示背景图的一部分，背景图而且会失真。
6.4 contain：当背景图大于容器时，背景图会以盒子最短边为准等比缩小到盒子最短边的位置，盒子会有留白，但背景图显示完整，背
景图不会失真。
当背景图小于容器时，背景图会以盒子最短边为准等比放大到盒子最短边的位置，盒子会有留白，背景图显示完整，但背景图会失真。
七. 背景颜色渐变
背景颜色渐变属于CSS3属性，只有两种：径向、线性
7.1径向渐变
background:radial-gradient(颜色1,颜色2);
半透明过渡到纯色：
background:radial-gradient(rgba(0,0,0,0),green);
例如：background:radial-gradient(rgba(255,255,255,0), green, rgba(255,255,255,0));
7.1线性渐变
background:linear-gradient(top,red,blue);
线性渐变默认从上往下开始
可以给属性值更改渐变开始方向：
left(从左往右)
right(从右往左)
top(从上往下)
bottom(从下往上)
45deg(角度渐变)
知识拓展：CSS黑客（hack）:专门去解决某个浏览器兼容问题。有些浏览器要加上-浏览器-黑客才能实现。
-webkit- 专门给谷歌内核看的
-moz- 专门给火狐看的
-ms- 专门给微软浏览器看的
background:-webkit-linear-gradient(left,red,green,blue);
线性渐变默认从上往下开始。
八. 多背景设置
background:url()no-repeat,url() no-repeat right top;
7.1用逗号隔开每一张图片。
7.2默认图片都在左上角。
7.3如果有颜色，颜色要放到最后面
九. 盒子阴影
box-shadow:水平 垂直 羽化 扩展颜色 inset;
三个值：水平、垂直、羽化
box-shadow最后加上inset就代表盒子内阴影
如果想要四周都有阴影，水平和垂直都设置为0
十. 文字阴影
text-shadow:水平 垂直 羽化 颜色;
多个阴影：text-shadow:0 0 0 yellow,0 0 0 green;
作者: 夜听雨 时间: 2019-10-22 11:05
除了恐惧和欲望，还有什么可以激励自己长期地努力？
作者: 25个蛋 时间: 2019-10-26 16:41
当你停下脚步的时候，别忘了别人还在奔跑。
作者: 小黑梅 时间: 2019-10-31 18:39
世界的温柔 是及时的善意和干净的你
作者: 1079591475 时间: 2019-10-31 20:31
当我拥有你，无论是在百货公司买领带，还是在厨房收拾一尾鱼，我都觉得幸福。
作者: chengjiayu 时间: 2019-11-1 14:06
余生就那么长，还请衷于自己。
作者: 黑马润 时间: 2019-11-1 19:17
海已静，山未青，月落于平行时空。长欢已远，迟眠五更，念心事灯火通明。相遇错失，欢悲照旧，我都承蒙。
作者: 流浪的猫~ 时间: 2019-11-2 16:32
读书当一意在书，游山水当一意在水，承兴所至，心无旁及。
作者: 情非得已。 时间: 2019-11-2 17:13
学问，是一张渔网，一个结一个，结出了捕鱼的工具。
作者: 简单77777 时间: 2019-11-2 17:50
如果只是向往，远方依旧是远方。
作者: 雨下的芭蕉 时间: 2019-11-4 10:38
为了照亮夜空，星星才站在天空的高处。
作者: 陈么么 时间: 2019-11-7 09:40
生活就像一面镜子，你若对她笑，她就对你笑。
作者: 夜听雨 时间: 2019-11-22 18:05
只要朝着一个方向努力，一切都会变得得心应手。加油
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |