[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:缩放背景图,宽度或者高度铺满元素,但是图片保持宽高比
    • <percentage>:百分比,相对于背景区(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图片制作(雪碧图、精灵图)
  • 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会折叠
    • 会取最大的那个值

推荐阅读更多精彩内容