• 北京限价房项目开闸 百亿货值将入市 ——凤凰网房产北京 2019-12-08
  • 秘鲁侨界研讨两岸关系和平发展 2019-12-02
  • 西安紫云溪小区深夜有人竟高空扔粪便 律师:违法行为 2019-11-29
  • 罗品禧的专栏作者中国国家地理网 2019-11-29
  • 市委把全国两会精神原汁原味传达到基层 2019-11-28
  • 西南铁路端午假期发送400余万人次 两人不文明乘车或受失信惩戒 2019-11-20
  • 四件汉白玉螭头回归圆明园 2019-11-20
  • 人的本质的演变规律:从原始母系氏族社会的公有者经过父系氏族社会私有和公有双重所有者而演变为私有制阶级社会的私有者,然后经过现代社会公有和私有双重所有者... 2019-11-06
  • 这样的帖子写主贴反驳,实在丢不起人! 2019-11-06
  • “道德瘾君子”侮辱了杨女士的善良 2019-10-30
  • 候选案例:“天使之心”儿童先心病救助项目 2019-10-23
  • 卢靖姗穿蓝色吊带笑容甜美 和粉丝合影花式比心 2019-10-12
  • 黄嘉刚特斯拉困境折射电动车产业困局 2019-10-07
  • OPPO Find X:曲面全景屏,史无前例的屏占比 2019-10-06
  • 古镇灯饰企业为灯饰品牌化鼓与呼 2019-10-06
  • 欢迎来到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-12-08
  • 秘鲁侨界研讨两岸关系和平发展 2019-12-02
  • 西安紫云溪小区深夜有人竟高空扔粪便 律师:违法行为 2019-11-29
  • 罗品禧的专栏作者中国国家地理网 2019-11-29
  • 市委把全国两会精神原汁原味传达到基层 2019-11-28
  • 西南铁路端午假期发送400余万人次 两人不文明乘车或受失信惩戒 2019-11-20
  • 四件汉白玉螭头回归圆明园 2019-11-20
  • 人的本质的演变规律:从原始母系氏族社会的公有者经过父系氏族社会私有和公有双重所有者而演变为私有制阶级社会的私有者,然后经过现代社会公有和私有双重所有者... 2019-11-06
  • 这样的帖子写主贴反驳,实在丢不起人! 2019-11-06
  • “道德瘾君子”侮辱了杨女士的善良 2019-10-30
  • 候选案例:“天使之心”儿童先心病救助项目 2019-10-23
  • 卢靖姗穿蓝色吊带笑容甜美 和粉丝合影花式比心 2019-10-12
  • 黄嘉刚特斯拉困境折射电动车产业困局 2019-10-07
  • OPPO Find X:曲面全景屏,史无前例的屏占比 2019-10-06
  • 古镇灯饰企业为灯饰品牌化鼓与呼 2019-10-06
  • 浙江飞鱼开奖 微信斗地主群赚钱吗 青海快三推荐走势图 pk10牛牛记录 北京赛车走势图表一比分 安卓捕鸟达人hd 河北快三走势图综合版 急速赛车怎么玩 注册绑定即送18元的棋牌 快乐扑克三缴税