• 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-08-17
  • 纸质书电子书何必分高低 2019-08-17
  • 山东栖霞聚焦扶贫领域精准监督 现场质询跟踪督办 2019-08-16
  • 开发者回顾《最终幻想12》的游戏制作过程 2019-08-13
  • 中欧班列整车进口专列抵达西安港 2019-08-13
  • 贵州日报报业集团总编辑万群祝贺人民日报创刊70周年 2019-08-11
  • 民生时评:上海支付宝回收垃圾并不现实(原创首发) 2019-08-10
  • 北美票房全女性阵容《瞒天过海:美人计》成票房大赢家 2019-08-10
  • 五万球迷助阵 国安主场“摘花” 2019-08-03
  • 中美研究人员发现新型狗流感病毒 2019-08-02
  • 2017年春季招聘 ,凤凰等你来! 2019-07-31
  • 这下就真的更加坐实你的老蚕了,所有网友都是见证!想赖都赖不掉了。 2019-07-14
  • 收藏!中国“世界级遗产”全名录 2019-07-14
  • 司法部推进“放管服”改革  全面清理各类“奇葩”证明 2019-06-29
  • 两年换4次工作 退役战友们亟待补上这八堂课 2019-06-27
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    CSS 背景-CSS background

    CSS background目录
    1. CSS背景语法
    2. css背景色
    3. css背景图片
    4. 背景居中
    5. 复合背景样式简写
    6. 背景background总结

    一、Css background背景语法   -   TOP

    香港买马资料大全背景基础知识
    CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。

    背景语法:
    background: background-color || background-image || background-repeat || background-attachment || background-position

    CSS中背景单词:
    background CSS手册查询-background手册
    background-color 设置颜色作为对象背景颜色
    background-image 设置图片作为背景图片
    background-repeat 设置背景平铺重复方向
    background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
    background-position 设置或检索对象的背景图像位置。

    Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
    如:
    background:#000 url(图片地址) no-repeat left top

    Css background背景作用:
    1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
    2、设置图为背景??梢陨柚枚韵蟊尘拔计?,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

    Background分析解析图

    background背景语法结构分析图
    Css background复合背景结构分析图
    1. Body{background:#FFF url(//www.ziixf.tw/img201301/divcss5-logo-2013.gif) no-repeat 0 0 fixed } 

    设置网页背景样式

    Html原始背景与CSS背景对照
    Html是指对应效果的table背景设置

    Html背景单词:
    Bgcolor设置背景颜色 与CSS背景颜色对应background-color
    Background设置图片作为背景与CSS背景图片对应background-image

    最原始HTML背景设置演示代码:

    1. <table bgcolor="#996600"> 
    2. <tr> 
    3. <td background="//www.ziixf.tw/img/css-logo.gif"
    4.  width="130" height="100">&nbsp;</td> 
    5. </tr> 
    6. </table> 

    这里设置了table背景颜色为#996600,然后设置了td的背景图片为//www.ziixf.tw/img/css-logo.gif

    二、背景颜色   -   TOP

    background-color:#FFF

    1. div{background-color:#FFF} 

    设置对象背景为纯白色

    如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
    如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
    CSS 背景颜色设置香港买马资料大全演示图:
     

    html背景,CSS 背景实例演示
    以上截图分别使用background-color和background来设置对象背景颜色

    三、CSS图片背景   -   TOP

    这里说的是以图片作为背景图片 -  CSS 背景图片详细介绍://www.ziixf.tw/jiqiao/j80.shtml
    CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

    background:url(//www.ziixf.tw/img/logo.gif);设置香港买马资料大全的LOGO图片作为背景

    background-image:url(//www.ziixf.tw/img/logo.gif);具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复,接下来我们只需看以下图例教程即可掌握CSS background

    CSS background解剖图
    图片背景样式(固定、滚动)

    实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。
    background-attachment使用解析:
    background-attachment:fixed; 背景固定
    background-attachment:scroll css背景图片是随对象内容滚动

    图片background背景语法:

    background-image :url (url)
    background-image :url (//www.ziixf.tw/img201301/divcss5-logo-2013.gif)设置对象背景为图片//www.ziixf.tw/img201301/divcss5-logo-2013.gif

    如果图片作为背景时候要求是否重复平铺,平铺方向等我们都需要background-position和background-repeat配合使用

    1. div{background-image :url (//www.ziixf.tw/img201301/divcss5-logo-2013.gif);
      background-repeat : no-repeat;background-position : 5px 6px } 

    这里定义对象div,背景图片为//www.ziixf.tw/img201301/divcss5-logo-2013.gif,并且背景图片不重复,定位于div对象靠左距离5px,靠上距离6px

    四、香港买马资料大全背景居中   -   TOP

    CSS 背景分为左右居中和上下居中,具体左右居中方法见上图。
    背景图像上下居中,可以使用计算上下高度然后平分设置,如上下高度距离为500px,那就设置图片居顶部多少PX可以让图片实现上下居中。

    五、复合背景样式简写   -   TOP

    我们使用时候都需要考虑到代码优简,这里可以优化的简写代码
    1、如果只设置背景为单一颜色
    background-color:#FFF 我们简写为 background:#FFF

    2、图片设置为背景简写

    1. background-image :url (//www.ziixf.tw/img201301/divcss5-logo-2013.gif);
      background-repeat : no-repeat;background-position : 5px 6px 

    我们简写为:

    1. background:url (//www.ziixf.tw/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px 

    六、CSS background(背景)总结   -   TOP

    使用图片作为背景在一个网页布局中常?;嵊龅?,希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center top ;(解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须,一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置)

    1、设置图片作为背景如果图片设置图片在X坐标方向重复,如果再设置图片在对象位置的左或右位置时将无效,可设置在对象上或下位置开始显示。

    2、设置图片作为背景如果图片设置图片在Y坐标方向重复,如果再设置图片在对象位置的上或下位置时将无效,可设置图片在对象左或右位置开始显示。

    3、如果设置背景完全重复显示,那设置图片在对象上下左右位置开始显示将无线。

    网页布局时候我们常常对网页背景设置颜色、背景设置图片,达到我们需要的美观效果,我们实践制作写css background背景尽量从简,图片引入时候注意路径正确,如需定位对象背景。

    经典背景复合属性表达式:

    1. .divcss5{background:#FFF url (//www.ziixf.tw/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px} 

    这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是否重复的样式。

    希望大家好好理解有不懂的地方可以进入CSS 研教室讨论区发表问题,我们将尽力答复您。 

    相关CSS背景教程文章:
    1、CSS背景颜色与背景图片
    2、DIV背景颜色设置
    3、ie6 png背景透明解决
    4、div css背景颜色不显示
    5、css隐藏背景图片上方文字
    6、css div实现鼠标移动到超链接上背景变化
    7、css background-position教程

    如需转载,请注明文章出处和来源网址://www.ziixf.tw/rumen/r125.shtml

    香港买马资料大全 www.ziixf.tw 如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    香港买马资料大全文章修订日期:2018-08-14 17:37 原创:香港买马资料大全
    本文香港买马资料大全 www.ziixf.tw DIVCSS5版权所有。

  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-08-17
  • 纸质书电子书何必分高低 2019-08-17
  • 山东栖霞聚焦扶贫领域精准监督 现场质询跟踪督办 2019-08-16
  • 开发者回顾《最终幻想12》的游戏制作过程 2019-08-13
  • 中欧班列整车进口专列抵达西安港 2019-08-13
  • 贵州日报报业集团总编辑万群祝贺人民日报创刊70周年 2019-08-11
  • 民生时评:上海支付宝回收垃圾并不现实(原创首发) 2019-08-10
  • 北美票房全女性阵容《瞒天过海:美人计》成票房大赢家 2019-08-10
  • 五万球迷助阵 国安主场“摘花” 2019-08-03
  • 中美研究人员发现新型狗流感病毒 2019-08-02
  • 2017年春季招聘 ,凤凰等你来! 2019-07-31
  • 这下就真的更加坐实你的老蚕了,所有网友都是见证!想赖都赖不掉了。 2019-07-14
  • 收藏!中国“世界级遗产”全名录 2019-07-14
  • 司法部推进“放管服”改革  全面清理各类“奇葩”证明 2019-06-29
  • 两年换4次工作 退役战友们亟待补上这八堂课 2019-06-27
  • 鞍山麻将房 福建时时快3结果走势图 大连十一选五开奖走势图 新疆时时历史记录 36选7复式投注表 辽宁十一选五开奖查询 极速时时彩的规律 综合分布图 河北麻将 分分彩压大小稳赢公式