[note] CSS 背景|cursor

内容概述

一. 背景设置

background-image 设置元素的背景图片

• 会盖在(不是覆盖)background-color的上面

• 如果设置了多张图片

  • background-image: url(), url(), url()
  • 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

• 注意：

  • 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

background-repeat 设置背景图片是否要平铺

• 常见的设值有
  • repeat：平铺（默认值）
  • no-repeat：不平铺
  • repeat-x：只在水平方向平铺
  • repeat-y：只在垂直平方向平铺

background-size 设置背景图片的大小

• background-size常见的设值有
  • auto：以背景图本身大小显示
  • cover：缩放背景图，以完全覆盖铺满元素
  • contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
  • ：百分比，相对于背景区（background positioning area）
  • length：具体的大小，比如100px
    • 例：background-size: auto 180px高度180，宽度按宽高比计算

background-position 背景图片在水平、垂直方向上的具体位置

• 水平方向还可以设值：left、center、right

• 垂直方向还可以设值：top、center、bottom

• 如果只设置了1个方向，另一个方向默认是center
  比如background-position: 80px; 等价于 background-position: 80px center;

• 注意：background-position 背景不存在overflow，超过了就是看不见

CSS Sprite

• 一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
• 使用CSS Sprite的好处
  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力（主要）
  • 减小图片总大小
  • 解决了图片命名的困扰，只需要针对一张集合的图片命名
• Sprite图片制作（雪碧图、精灵图）
  • 方法1：Photoshop
  • 方法2：https://www.toptal.com/developers/css/sprite-generator
• CSS Sprite编写建议
  • 先统一设置background-img，然后再逐个设置position

background-attachment

• background-attachment可以设置以下3个值（很少使用）
  • scroll：背景图片跟随元素一起滚动（默认值）
  • local：背景图片跟随元素以及元素内容一起滚动
  • fixed：背景图片相对于浏览器窗口固定

background

• background是一系列背景相关属性的简写属性，常用格式是
  • image position/size repeat attachment color
• background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
• 其他属性也都可以省略，而且顺序任意

background-image和img的选择

屏幕快照 2020-02-13 上午10.35.10.png

• 利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？
  • img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
  • background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

二、CSS属性 - cursor

• cursor可以设置鼠标指针（光标）在元素上面时的显示样式
• cursor常见的设值有
  • auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
  • default：由操作系统决定，一般就是一个小箭头
  • pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
  • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
  • none：没有任何指针显示在元素上面

作业

1.阴影作业

2.京东 多快好省

3.京东 - 图标

?: 0个或者1个

inset?

color? -> red/orange

length{2,4}: 2个到4个数字, 2,3,4

提问

overflow

• auto
• visible
• hidden
• scroll

问题一: 盒子模型包含哪些部分:

• margin
  • 上右下左
• padding
  • 上右下左
• border
  • 上右下左
  • 边框 样式 颜色
• content
  • width和高度
  • min-width/max-width
  • min-height/max-height

问题二: margin的传递和折叠在什么情况下产生:

• margin传递:
  • 当子元素和父元素的顶线重叠, 子元素的margin-top会传递给父元素
  • margin-bottom是子元素和父元素的底线重叠, 并父元素的高度必须是auto时, 会子元素的margin-bottom会传递给父元素
• margin折叠:
  • 垂直方向上相邻两个元素的margin-bottom和margin-top会折叠
  • 会取最大的那个值