HTML css 中关于img 和背景图片的详细讲解笔记

图片

插入图片与背景图片的区别

区别一

• img是一个html标签 写在body结构里面
• background-image 是css样式属性，写在style或者link标签里面

区别二

• img 属于行内块元素，本身是有大小的
• background-image没有内容或没有设置宽高大小的时候不会显示

区别三

• img 设置宽高大小如果和自身的大小不匹配的时候，会出现拉伸或者裁减的情况
• background-image 容器的大小和背景图片不匹配的时候，可以用背景属性background-size去适配容器的大小

区别四

• img 放在图片上右击可以复制图片地址
• background-image：需要在控制台中的style面板中去查找复制

背景类属性（css2的5个 css3 新增3个）

css 2

• background-color：背景颜色
• background-image：url（）背景图片的路径
• background-repeat：no-repeat； 背景图片的平铺方式
• background-position：center center 背景图片的定位
• background-attachment：fixed 背景图片是否滚动
  • fixed ：背景图片相对于窗体固定
  • scroll ：背景图片相对于元素固定 ，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
• 复合：background：#000 url（） no-repeat center center fixed
  五个值，位置没有要求

css 3

• background-size：cover；背景尺寸
  • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
  • contain ：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
  • auto ：背景图像的真实大小
  • percentage：用百分比指定背景图像大小，不允许负值
• background-clip 背景裁减
  • padding-box： 从padding区域（不含padding）开始向外裁剪背景。
  • border-box： 从border区域（不含border）开始向外裁剪背景。
  • content-box： 从content区域开始向外裁剪背景。
  • text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩
• background-origin 背景显示的原点
  • padding-box： 从padding区域（含padding）开始显示背景图像。
  • border-box： 从border区域（含border）开始显示背景图像。
  • content-box： 从content区域开始显示背景图像。