CSS背景及应用内容总览：
- 背景图片（image）
- 背景平铺（repeat）
- 背景位置（position）
- 背景附着
- 背景简写
- 背景透明（CSS3）
- 背景缩放（CSS3）
- 多背景（CSS3）
- 凹凸文字
背景图片（image）
- background-image：默认值为none，表示背景上没有放任何图像；若要放置图片，需要设置URL属性，格式如下：
background-image: url(图片路径);
示例1
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { background-image: url(../../../assets/yangzi.jpeg); } </style> </head>
- 注意：background-image 不能继承。事实上，所有背景属性都不能继承。
背景平铺（重复）（repeat）
- 在页面中对背景图片进行平铺，即对同一张图片进行重复放置使类似与div的盒子（有一定宽高的）内部的位置被填满。
- repeat-x ：在水平方向上重复平铺图片
- repeat-y ：在垂直方向上重复平铺图片
- no-repeat ：则不允许图像在任何方向上平铺
示例2
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 1000px; height: 600px; background-color: violet; background-image: url(../../../assets/yangzi.jpeg); background-repeat: repeat-x; } </style> </head>
页面效果如下：
背景位置（position）
- background-position：left top；背景图片默认是在坐上角，如上面示例2所示；
- 用来更改背景图片的位置；属性值有 top | center | bottom | left | right；
- 如果background-position中的值只写一个，另外一个值默认为center；两个值的位置交换后效果一样；即background-position：left top；和 background-position：top left；效果相同
背景附着
- background-attachment：设置或检索背景图片是随对象内容滚动还是固定的。
- scroll：背景图片是随对象内容滚动
- fixed：背景图片固定不动
背景简写
- background：属性值的顺序官方并没有强制标准。为了可读性，建议大家写成下面的格式；
- background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景透明（CSS3）
- CSS3支持背景半透明的写法，与颜色color的半透明写法相同；格式如下:
background：rgba(r,g,b,a) <!-- a 为alpha 透明的意思，取值为 0~1之间； -->
- 注意：背景背景半透明并不影响盒子里面的内容；
背景缩放（CSS3）
- background-size：设置背景图片的尺寸。参数如下
- 可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）；
- 设置为cover时，会自动调整缩放比例，保证图片始终完整显示在背景区域，如有溢出部分则会被隐藏；
- 设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域，但可能会有一部分裸漏区域；
background-size: 宽度 高度;
- 注意：尽量只改一个值，另一个值会等比例缩放。
多背景（CSS3）
- 以 逗号 （,）分隔开，可以设置多背景，可用于自适应布局。格式如下
background-image: url(图片1地址), 图片2地址, 、、、;
或
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置,
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置,
、、、;
凹凸文字
- 利用阴影属性text-shadow实现；可以在text-shadow中添加多个值。格式如下：
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色，
水平位置 垂直位置 模糊距离 阴影颜色，
、、、；
文本的装饰
text-decoration：通常我们用于给链接修改装饰效果
- 使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。
总示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 1000px; height: 600px; /* background-color：背景颜色 */ /* background-color: violet; */ /* background-image：背景图片 */ /* background-image: url(../../../assets/yangzi.jpeg); */ /* background-repeat：背景平铺（重复） */ /* background-repeat: no-repeat; */ /* background-position：背景位置 */ /* background-position: right bottom; */ /* background-attachment：背景附着 */ /* background-attachment: scroll; */ /* background：背景简写 等价于以上五句*/ background: hotpink url(../../../assets/yangzi.jpeg) no-repeat fixed left top; /* background-size：图片缩放 */ background-size: 800px; } /* 背景透明 */ .rgba { width: 1000px; height: 100px; background: rgba(0, 0, 0, 0.3); } /* 凹凸文字：text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/ .text-shadow{ width: 1200px; height: 200px; background-color:#ccc; } span.tu{ font: 700 100px "微软雅黑"; color:#ccc; text-shadow: 3px 3px 3px #000,-5px -5px 3px #fff; } span.ao{ font: 700 80px "微软雅黑"; color:#ccc; text-shadow: -5px -5px 3px #000,3px 3px 3px #fff; } </style> </head> <body> <div> <div class="rgba"></div> </div> <br/><br/> <div class="text-shadow"> <span class="tu">我是凸起文字 </span> <span class="ao">我是凹下文字</span> </div> </body> </html>
页面效果如下：
