您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

上海十一选5走势图:CSS background 背景

CSS 背景-CSS background

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

一、Css background背景语法

内蒙古11选五开奖5号的背景基础知识
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复合背景结构分析图
Body{background:#FFF url(//www.phlmy.com/images201610/logo.gif) no-repeat 0 0 fixed } 

设置网页背景样式

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

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

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

 

<table bgcolor="#996600"> 
<tr>
<td background="//www.phlmy.com/img/css-logo.gif"
width="130" height="100">&nbsp;</td>
</tr>
</table>

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

二、背景颜色

background-color:#FFF

div{background-color:#FFF} 

设置对象背景为纯白色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
CSS 背景颜色设置内蒙古11选五开奖5号的演示图:
 

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

三、CSS图片背景

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

background:url(//www.phlmy.com/img/logo.gif);设置内蒙古11选五开奖5号的的LOGO图片作为背景

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

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

div{background-image :url (//www.phlmy.com/images201610/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px }

这里定义对象div,背景图片为//www.phlmy.com/images201610/logo.gif,并且背景图片不重复,定位于div对象靠左距离5px,靠上距离6px

四、内蒙古11选五开奖5号的背景居中

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

五、复合背景样式简写

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

2、图片设置为背景简写

background-image :url (//www.phlmy.com/images201610/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px

我们简写为:

background:url (//www.phlmy.com/images201610/logo.gif) no-repeat 5px 6px 

六、CSS background(背景)总结

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

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

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

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

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

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

.thinkcss{background:#FFF url (//www.phlmy.com/images201610/logo.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教程

相关标签: 背景 CSS 背景
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/125.shtml

日期:2013-01-22 13:52:00 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:div css
上一篇:CSS height(css 高)
下一篇:CSS margin 外边距
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-04-16
  • 第十二届中国(南宁)国际园林博览会相约绿城冬季 2019-04-16