CSS3的背景图片设置

Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!

CSS3的背景图片设置

课程概要

  1. 背景图片起始位置 background-origin
  2. 背景图片裁剪 background-clip
  3. 嵌入字体 @font-face

1. 背景图片起始位置 background-origin

background-origin
border-box 边框
padding-box 内边距(默认值)
content-box 内容区域
background-origin : border-box | padding-box | content-box;

注意: 背景必须设为no-repeat

2. 背景图片裁剪 background-clip

background-clip
border-box 边框(默认值)
padding-box 内边距
content-box 内容区域
no-clip 不裁剪,与border-box效果相同

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

background-size
auto 默认值,不改变背景图片的原始高度和宽度
长度值 成对出现如200px 50px, 只设置一个值, 等比例缩放
百分比 0%~100%之间的任何值, 只设置一个值, 等比例缩放
cover 覆盖, 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain 容纳, 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
上一篇课程 下一篇课程

学生登录