Author: 刘老师(Aaron Lau)
武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!
CSS3的背景图片设置
课程概要
- 背景图片起始位置
background-origin
- 背景图片裁剪
background-clip
- 嵌入字体
@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 |
容纳 , 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。 |