1. PS的基本设置

  1.    单位设置成像素啥的……

2. 背景

  • background-color 设置背景颜色
  • background-image 设置背景图片
    • 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
    • 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
    • 如果背景图片大小等于元素，则背景图片会直接正常显示
  • background-repeat 设置背景图片的重复方式
    • repeat 默认值，背景图片沿着x轴和y轴双方向重复
    • repeat-x 背景图片沿着x轴方向重复
    • repeat-y 背景图片沿着y轴方向重复
    • no-repeat 背景图片不重复

  • background-position 设置背景图片的位置 (有数值)

    • 通过top left right bottom center几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center，相当于一个九宫格 | top left | top center | top right | | —- | —- | —- | | left center | center center | right center | | left bottom | bottom center | right bottom |

    • 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量

  • background-clip 裁剪背景的范围
    • border-box 默认值，背景会出现在边框的下边
    • padding-box 背景不会出现在边框，最大范围只出现在内容区和内边距
    • content-box 背景最大范围只会出现在内容区
  • background-origin 背景图片的偏移量计算的原点
    • border-box 背景图片的变量从边框处 开始 计算
    • padding-box 默认值，background-position从内边距处开始计算
    • content-box 背景图片的偏移量从内容区处计算
  • background-size 设置背景图片的大小 两个值表示宽、高，
    • 如果只写一个，则第二个值默认是auto
    • cover 图片的比例不变，将元素铺满
    • contain 图片比例不变，将图片在元素中完整显示
  • background-attachment 背景图片是否跟随元素移动
    • scroll 默认值，背景图片会跟随元素移动
    • fixed 背景会固定在页面中，不会随元素移动

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
示例1

  1. .box1 {
  2.     height: 500px;
  3.     width: 500px;
  4.     overflow: auto;
  5.     border: 20px red double;
  6.     padding: 10px;
  8.     /* 背景色 */
  9.     background-color: darksalmon;
  11.     /* 背景图 */
  12.     background-image: url('/assets/背景.png');
  14.     /* 背景图重复方式 */
  15.     background-repeat: no-repeat;
  17.     /* 背景图偏移位置.相对于原点的
  18.        水平偏移（正值往右，负值往左），垂直方向偏移（正值往下，负值往上） */
  19.     background-position: 0 0;
  21.     /* 背景图偏移量计算的原点 */
  22.     background-origin: content-box;
  24.     /* 背景范围 */
  25.     background-clip: content-box;
  27.     /* 背景图片大小 */
  28.     background-size: contain;
  29. }
  31. .box2 {
  32.     width: 100px;
  33.     height: 1000px;
  34.     background-color: orange;
  35.     background-image: url("assets/背景2.jpg");
  36.     background-repeat: no-repeat;
  37.     background-position: 50px 50px;
  38.     /* 背景图片是否跟随移动 */
  39.     background-attachment: fixed;
  40. }

11.背景 - 图1
backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的
注意

  • background-size必须写在background-position的后边，并且使用/隔开background-position/background-size
  • background-origin background-clip 两个样式，orgin要在clip的前边

示例2

  1. .box1 {
  2.     height: 500px;
  3.     width: 500px;
  4.     border: 10px red double;
  5.     padding: 10px;
  6.     background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px padding-box content-box;
  7. }

11.背景 - 图2

练习1：线性渐变效果的背景图

11.背景 - 图3
如果我们仔细挂那可能，会发现很多网站导航条的背景色并不是单一的某种颜色，而是有一个从上到下渐变的效果不过到目前为止，我们还没有学习线性渐变的内容，不过凭上面所学的知识同样可以实现
切图
首先，我们需要通过PS软件进行切图

  1. 按住Alt同时滚动鼠标滑轮，可以对图片大小进行缩放；调整至合适大小，再选择矩形块工具，截取一个宽度为1px大小的图片

11.背景 - 图4

  1. 然后选择图像-裁剪，就可以得到一个我们需要的一个背景图片

11.背景 - 图5
11.背景 - 图6

  1. 最后，选择文件-存储为Web所用格式

11.背景 - 图7

  1. 我这里选择的是PNG的格式，你可以对比几种格式，看看最终的图片大小折中选择，最好选择存储位置即可

11.背景 - 图8

  1. 得到我们需要的背景图片之后，就可以引入到css样式中了
    1. height: 60px;
    2. width: 1500px;
    3. background: url("assets/背景3.png") repeat-x;
    11.背景 - 图9

练习2：按钮点击效果

  1. <style>
  3.     a:link {
  4.         /* 因为本身是行内元素，变成块元素更方便设置宽高 */
  5.         display: block;
  6.         width: 93px;
  7.         height: 29px;
  8.         background: url("assets/背景/练习2-背景/link.png");
  9.     }
  11.     a:hover {
  12.         background: url("assets/背景/练习2-背景/hover.png");
  13.     }
  15.     a:active {
  16.         background: url("assets/背景/练习2-背景/active.png");
  17.     }
  18. </style>
  20. <a href="javascript:;"></a>

复习小课堂（伪类元素特殊状态）

  • 标签元素 : link 未访问的链接（正常的链接）
  • :标签元素 : visited 已访问的链接 （一般不常用）
    • 由于隐私的原因，所以visited这个伪类只能修改链接的颜色，并不能修改大小之类的样式
  • 标签元素 : hover 鼠标悬停的链接
  • 标签元素 : active 鼠标点击的链接

效果
11.背景 - 图10