美文网首页
前端第五天学习

前端第五天学习

作者: 看三小 | 来源:发表于2018-10-22 09:31 被阅读6次

background-color

  • background-color属性用来为元素设置背 景颜色。
  • 需要指定一个颜色值,当指定了一个颜色 以后,整个元素的可见区域都会使用这个 颜色作为背景色。
  • 如果不设置背景颜色,元素默认背景颜色 为透明,实际上会显示父元素的背景颜色。

background-image

  • background-image可以为元素指定背景 图片。
  • 和background-color类似,这不过这里使 用的是一个图片作为背景。
  • 需要一个url地址作为参数,url地址需要指 向一个外部图片的路径
  • 例如:
    background-image: url(1.jpg)

background-repeat

  • background-repeat用于控制背景图片的 重复方式。
  • 如果只设置背景图片默认背景图片将会使 用平铺的方式,可以通过该属性进行修改。
  • 可选值:
    repeat:默认值,图片左右上下平铺
    no-repeat:只显示图片一次,不会平铺
    repeat-x:沿x轴水平平铺一张图片
    repeat-y:沿y轴水平平铺一张图片

background-position

  • background-position用来精确控制背景 图片在元素中的位置。
  • 可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
    关键字:top right bottom left center
    百分比
    数值

background-attachment

  • background-attachment用来设置背景图 片是否随页面滚动。
  • 可选值:
    scroll:随页面滚动
    fixed:不随页面滚动

background

  • background是背景的简写属性,通过这个 属性可以一次性设置多个样式,而且样式 的顺序没有要求。
  • 例如:
    background: green url(1.jpg) no-repeat center center fixed;

CSS Sprite

  • CSS Sprites是一种网页图片应用处理方式。
  • 通过这种方式我们可以将网页中的零星图 片集中放到一张大图上。
  • 这样一来,一次请求便可以同时加载多张 图片,大大提高了图片的加载效率。

相关文章

  • 前端第五天学习

    background-color background-color属性用来为元素设置背 景颜色。 需要指定一个颜色...

  • 前端开发学习第五天

    用DW写第一个html文件 head标签 head标签是放整个文件的头部,具体有以下标签: 1. 2. 3. 4....

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

  • 学习图谱

    前端整体 基础学习路线 进阶学习路线 整体学习路线 「前端进阶」2018/2019 史上最全的前端学习路线 How...

  • iOS开发如何学习前端

    iOS开发如何学习前端 iOS开发如何学习前端

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • [前端学习]css部分学习笔记,第五天

    背景附着 background-attachment:scroll|fixed 背景附着就是指背景图片的滚动形式,...

  • 2019-06-14

    我的前端学习之路 最近在闲暇之余在学习前端开发 前端学习之第一步:下载webstorm,开...

  • 学习纲要:了解前端

    学习目标 知道什么是前端开发 知道前端开发的工作内容 了解前端要学些什么 学习资源 前端路上的旅行 写给初学前端工...

  • 前端基础学习

    前端学习路径加强版 前端新手,不知道如何自学?前端养成记告诉你,正确的前端学习路径!从此规划好前端自学进度…… H...

网友评论

      本文标题:前端第五天学习

      本文链接:https://www.haomeiwen.com/subject/hyjwzftx.html