一、背景(background)

它是单一属性

但是它衍生出很多的复合属性

background-color       背景色

background-image     背景图片

background-repeat      背景图片是否重复

background-position    背景图片位置

background-attachment  背景图片是否滚动

1、背景颜色

内容可以把容器的宽高撑开  背景不会占用内容的宽高  背景色会铺满整个容器  transparent背景透明(默认)

2、背景图片

background-image  url(图片地址)

3、背景平铺

background-repeat:  背景图是否平铺

no-repeat  不平铺

repeat-x    横向平铺

repeat-y   纵向平铺

repeat    全部平铺(默认值)

4、背景图片的位置

background-positon:x y

传数值    代表背景图片离容器左上角的距离

x

  负值  从容器的左边往左边走的距离

y

  正值  从容器的上边往下边走的距离

  负值  从容器的上边往上边走的距离

传关键字

x

  left  图片的左边  center  图片在容器x轴的中心  right  图片在容器的右边

y

  top  图片的上边  center  图片在容器y轴的中心  bottom  图片在容器的下边

注意:

  如果只传一个值  另一个值默认为center

  如果都不传  默认为左上角

5、background-attachment  背景图片是否滚动

scroll  跟随滚动条滚动(默认)  fixed  不会跟随滚动条滚动

6、background的复合样式:

  

WEB前端--背景相关知识点总结的更多相关文章

  1. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

  2. Java web 前端面试知识点总结

    经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性 ...

  3. Web 前端 注意知识点

    一.  前端使用技巧: 1. button的用法.在使用按钮时可以自由在内设置style属性,来改变形态.可以给予type=sbumit提交属性. 2. 各种使用符号: # <!--小于 大于 ...

  4. WEB前端基础知识点

    因为要告知浏览器的解析器用什么文档标准解析这个文档,所以在文档的开头要写上文档类型声明,H5的文档类型声明要比H4文档类型声明简洁的多.因为H5不基于SGML(标准通用标记语言),所以不需要对DTD文 ...

  5. web前端常用知识点

    1.常见的块级元素  内联元素   div -最常用的块级元素      dl - 和dt-dd 搭配使用的块级元素      form - 交互表单      h1 -h6- 大标题      hr ...

  6. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  9. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. C# 6.0 功能预览 (一)

    一.索引的成员和元素初始化 1.1 原始初始化集合 Dictionary 1.2 键值初始化集合 Dictionary 1.3 运算符 $ 初始化集合 Dictionary 二.自动属性的初始化 一不 ...

  2. jqGrid的autoencode参数设置为true在客户端可能引发的编码问题

    不久前使用jqGrid+MVC做过一段时间开发. 一开始,分页参数几乎都是默认值,jqGrid的分页功能很好用. 考虑到each input is evil,我们的系统对安全性又有较高要求,所以,为了 ...

  3. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  4. Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx

    Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx 1.1. 数据库的类型,网状,层次,树形数据库,kv数据库.oodb2 1.2. Er模型2 1.3. Sql2 ...

  5. WPF入门教程系列二十二——DataGrid示例(二)

    DataGrid示例的后台代码 1)  通过Entity Framework 6.1 从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,从S_ Province表中读取 ...

  6. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  7. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  8. 【转】WPF 单选的Checkbox

    今天同事要在DataGrid里用单选的Checkbox,我感觉很多余,因为正常DataGrid就可以单选,为什么还要加一列Checkbox,但是人家要求再那里,我就告诉他,可以用RadioButton ...

  9. 深入理解DOM事件类型系列第四篇——剪贴板事件

    × 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...

  10. Android之JSON解析

    做个Android网络编程的同学一定对于JSON解析一点都不陌生,因为现在我们通过手机向服务器请求资源,服务器给我们返回的数据资源一般都是以JSON格式返回,当然还有一些通过XML格式返回,相对JSO ...