• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:时时彩走势图后一 > DIV+CSS基础 >

    CSS基础必学列表

    CSS 背景(css background)

    时时彩走势图后一 www.cuhw.com.cn 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.cuhw.com.cn/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.cuhw.com.cn/img/css-logo.gif"
    4.  width="130" height="100">&nbsp;</td> 
    5. </tr> 
    6. </table> 

    这里设置了table背景颜色为#996600,然后设置了td的背景图片为//www.cuhw.com.cn/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.cuhw.com.cn/jiqiao/j80.shtml
    CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

    background:url(//www.cuhw.com.cn/img/logo.gif);设置时时彩走势图后一的LOGO图片作为背景

    background-image:url(//www.cuhw.com.cn/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.cuhw.com.cn/img201301/divcss5-logo-2013.gif)设置对象背景为图片//www.cuhw.com.cn/img201301/divcss5-logo-2013.gif

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

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

    这里定义对象div,背景图片为//www.cuhw.com.cn/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.cuhw.com.cn/img201301/divcss5-logo-2013.gif);
      background-repeat : no-repeat;background-position : 5px 6px 

    我们简写为:

    1. background:url (//www.cuhw.com.cn/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.cuhw.com.cn/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.cuhw.com.cn/rumen/r125.shtml

    我要分享到:

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

     

    如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    时时彩走势图后一文章修订日期:2013-01-22 13:52 原创:时时彩走势图后一
    本文时时彩走势图后一 www.cuhw.com.cn DIVCSS5版权所有。

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13