背景
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
background-color | 设置元素的背景颜色 |
background-image | 把图像设置为背景 |
background-position | 设置背景图像的起始位置 |
background-repeat | 设置背景图像是否及如何重复 |
background-size | 设置背景的大小(兼容性) |
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以缩写为一句:
background: #f00 url(background.gif) no-repeat fixed 0 0;
icon五种实现方式
- img标签
注意事项:1. img的大小设置。 2. img的vertical-align。 3. 请求过多。
- icon sprites
缺点:1. 无法缩放 2. 不好修改
1.在线工具
2.用命令行:(sprity create build resource/*.png -s style.css)
- icon font(把字体做成图标)
1.制作字体文件。
2.声明font-family。1. 使用本地连接。 2. 使用第三方链接
3.使用font-family 1. 使用HTML实体 2. 使用CSS:before
- css icon(IE不支持)
css icon
- svg(移动端首选)
1.img src=svg
2.SVG"sprites"