CSS常见样式2

背景

属性 描述
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五种实现方式

  1. img标签
    注意事项:1. img的大小设置。 2. img的vertical-align。 3. 请求过多。
  1. icon sprites
    缺点:1. 无法缩放 2. 不好修改
    1.在线工具
    2.用命令行:(sprity create build resource/*.png -s style.css)
  1. icon font(把字体做成图标)
    1.制作字体文件。
    2.声明font-family。1. 使用本地连接。 2. 使用第三方链接
    3.使用font-family 1. 使用HTML实体 2. 使用CSS:before
  1. css icon(IE不支持
    css icon
  1. svg(移动端首选)
    1.img src=svg
    2.SVG"sprites"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答#### text-align:center的意思是块级元素中的行内内容居中。作用在block-level元素...
    mhy_web阅读 148评论 0 0
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-ali...
    madpluto阅读 268评论 0 0
  • 问答 1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 作用:设置内部...
    饥人谷_js_chen阅读 355评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中让行内元素水平居中;作用在...
    Komolei阅读 247评论 0 0
  • “世界上最遥远的距离不是生与死,而是我坐在你身旁,你却在玩手机。” 现如今,手机、电脑、iPad无形之中已经占据了...
    曼莓蓝子阅读 1,339评论 8 9