欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> CSS 背景-CSS background
CSS background目录
一、Css background背景语法
背景基础知识
CSS 背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。
背景语法：
background: background-color || background-image || background-repeat || background-attachment ||
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分析解析图
Css background复合背景结构分析图
Body{background:#FFF&url(/img201301/divcss5-logo-2013.gif)&no-repeat&0&0&fixed&}&
设置网页背景样式
Html原始背景与CSS背景对照
Html是指对应效果的table背景设置
Html背景单词：
Bgcolor设置背景颜色 与对应background-color
Background设置图片作为背景与CSS背景图片对应background-image
最原始HTML背景设置演示代码：
&bgcolor=&#996600&&&&background=&/img/css-logo.gif&&width=&130&&height=&100&&&&&
这里设置了table背景颜色为#996600，然后设置了td的背景图片为/img/css-logo.gif
二、背景颜色
background-color:#FFF
div{background-color:#FFF}&
设置对象背景为纯白色
如果是给table设置背景颜色可以使用bgcolor=&颜色值&即可设置对象背景颜色。
如果是CSS背景颜色，可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
CSS 背景颜色设置演示图：
以上截图分别使用background-color和background来设置对象背景颜色
三、CSS图片背景
这里说的是以图片作为背景图片 -& 详细介绍：
CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。
background:url(/img/logo.gif);设置的LOGO图片作为背景
background-image:url(/img/logo.gif);具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复，接下来我们只需看以下图例教程即可掌握CSS background
图片背景样式（固定、滚动）
实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。
background-attachment使用解析：
background-attachment:fixed； 背景固定
background-attachment:scroll css背景图片是随对象内容滚动
图片background背景语法：
background-image :url (url)
background-image :url (/img201301/divcss5-logo-2013.gif）设置对象背景为图片/img201301/divcss5-logo-2013.gif
如果图片作为背景时候要求是否重复平铺，平铺方向等我们都需要background-position和background-repeat配合使用
div{background-image&:url&(/img201301/divcss5-logo-2013.gif);background-repeat&:&no-background-position&:&5px&6px&}&
这里定义对象div，背景图片为/img201301/divcss5-logo-2013.gif，并且背景图片不重复，定位于div对象靠左距离5px，靠上距离6px
四、背景居中
CSS 背景分为左右居中和上下居中，具体左右居中方法见上图。
背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为500px，那就设置图片居顶部多少PX可以让图片实现上下居中。
五、复合背景样式简写
我们使用时候都需要考虑到代码优简，这里可以优化的简写代码
1、如果只设置背景为单一颜色
background-color:#FFF 我们简写为 background:#FFF
2、图片设置为背景简写
background-image&:url&(/img201301/divcss5-logo-2013.gif);background-repeat&:&no-background-position&:&5px&6px&
我们简写为：
background:url&(/img201301/divcss5-logo-2013.gif)&no-repeat&5px&6px&
六、CSS background（背景）总结
使用图片作为背景在一个网页布局中常常会遇到，希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须，一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置）
1、设置图片作为背景如果图片设置图片在X坐标方向重复，如果再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。
2、设置图片作为背景如果图片设置图片在Y坐标方向重复，如果再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。
3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无线。
网页布局时候我们常常对网页背景设置颜色、背景设置图片，达到我们需要的美观效果，我们实践制作写css background背景尽量从简，图片引入时候注意路径正确，如需定位对象背景。
经典背景复合属性表达式：
.divcss5{background:#FFF&url&(/img201301/divcss5-logo-2013.gif)&no-repeat&5px&6px}&
这里既设置背景颜色，背景图片引入，背景图片定位、图片作为背景是否重复的样式。
希望大家好好理解有不懂的地方可以进入讨论区发表问题，我们将尽力答复您。&
相关CSS背景教程文章：
7、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • ()• • ()• ()• • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• &最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 13:52
原创：本文 DIVCSS5版权所有。
学习与资源分享平台后使用快捷导航没有帐号？
只需一步，快速开始
查看: 6598|回复: 6
如何在css里面让background:url(../images/bg.gif) 只重复一遍，不需要重复调用！
UID512811在线时间 小时积分76帖子离线17196 天注册时间
初级会员, 积分 76, 距离下一级还需 124 积分
如何在css里面让background:url(../images/bg.gif) no-repeat -44px -55只重复一遍，别的类和ID调用时就不需要重复写background:url(../images/bg.gif)，而是直接写：background-repeat:*px *px。
UID182772在线时间 小时积分692帖子离线17196 天注册时间
高级会员, 积分 692, 距离下一级还需 308 积分
给 background:url(../images/bg.gif) no-repeat -44px -55 定义一个类
background-repeat:*px * 给这个定义 ID 或类。
然后在代码里调用。
UID264975在线时间 小时积分7319帖子离线17196 天注册时间
background-repeat:*px * 是个什么意思
background-repeat
[i]定义和用法
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
[i]可能的值
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
[[i] 本帖最后由 4321285 于
14:02 编辑 ]
UID512811在线时间 小时积分76帖子离线17196 天注册时间
初级会员, 积分 76, 距离下一级还需 124 积分
UID496283在线时间 小时积分3441帖子离线17196 天注册时间
回复 1# huawei838 [楼主] 的帖子
在不改动 HTML 结构的情况下，可以在 CSS 中使用群组选择符。
UID253318在线时间 小时积分260帖子离线17196 天注册时间
中级会员, 积分 260, 距离下一级还需 240 积分
.a {background:url(../images/bg.gif) no-repeat -44px -55}
.a.b { background-position:*px * }
.a.c { background-position:*px * }
&a class=&a b&&这样?&/a&
UID522355在线时间 小时积分75帖子离线17196 天注册时间
初级会员, 积分 75, 距离下一级还需 125 积分
给可以重复的定义一个CLASS类,然后给要单独调用的写个ID就可以
Powered byCSS background-image
Description
Use the background-image property to display an image in the background of an html element.
the image will appear in the position set using background-position. Also the image may tile in either y or x axis depending on the setting of background-repeat.
background-image: url(URL);
/* e.g. background-image: url(images/image1.jpg); */
background-image:
background-image:
See also: background-color, background-position, background-attachment, background-repeat
Examples for css background-image
This is the image we will be using as our background: &&
Example 1:
This is the simplest example where we just add the image to the background. The interesting points to note here are that a) the image is smaller than the element so the image is tiled b) the image is tiled both horizontally and vertically. The following examples will show how to control this tiling to our advantage using the repeat properties.
#test { background-image: url(../images/grad.gif); }
&div id="test"&
test &br/&text&br/&test&br/&text&br/&
test &br/&text &br/&test &br/&text &br/&
Example 2:
This time we use the background-repeat properties so we only tile the image horizontally. This is a really cool feature as the browser will keep on repeating when you expand a window so the image only needs to be really small - try the give it a go feature and expand and contract the width of the browser and you will see what I mean. You can use to create title bars, menu bars etc. :
test text test
#test2 { background-image: url(./images/grad.gif); background-repeat: repeat-x; }
&div id="test2"&
test &br/&text&br/&test&br/&
Values for &background&
background-image
url(URL) e.g. url(images/image1.jpg)none
Specifies an image to display in the background of the element
background-color
rgb(100%,0%,0%)
transparent
Set the background color of the element.
background-repeat
repeatrepeat-xrepeat-yno-repeat
Specifies the repeat style of the background image. repeat-x causes tiling to the left and the right, repeat-y causes tiling up and down
background-attachment
scrollfixed
Specifies if background image scrolls or is fixed when the page is scrolled
background-position (note two values one for x and one for y
For y&&&%|px|top|center|bottomFor x:&&&%|px|left|center|righte.g. top lefte.g. 50% righte.g. 50% 20px
Specifies the position of the background image. Or if tiling then indicates the origin of the tiling
A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks.
TotalEdit is FREE for commercial and non-commercial purposes (its freeware).