CSS常见样式2

背景

属性 描述
background 简写属性,作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复
background-size 设置背景的大小(兼容性)
1
2
3
4
5
6
7
8
9
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”

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 背景
  2. 2. icon五种实现方式
    1. 2.1. img标签
    2. 2.2. icon sprites
    3. 2.3. icon font(把字体做成图标)
    4. 2.4. css icon(IE不支持)
    5. 2.5. svg(移动端首选)
,