CSS 背景(css background)

CSS 背景(css background)CSS 背景(css background)

CSS 背景(css background)

CSS 背景-CSS background

CSS background目录  

 
一、Css background背景语法   -  

CSS背景基础知识
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分析解析图


Css background复合背景结构分析图

Body{background:#FFF url() 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=""

 width="130" height="100">&nbsp;</td> 

</tr> 

</table> 

这里设置了table背景颜色为#996600,然后设置了td的背景图片为

二、背景颜色   -  

background-color:#FFF

div{background-color:#FFF} 

设置对象背景为纯白色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
CSS 背景颜色设置DIV+CSS演示图:
 


以上截图分别使用background-color和background来设置对象背景颜色

三、CSS图片背景   -  

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

background:url();设置DIVCSS5的LOGO图片作为背景

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


图片背景样式(固定、滚动)

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

图片background背景语法:

background-image :url (url)
background-image :url ()设置对象背景为图片

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

div{background-image :url ();
background-repeat : no-repeat;background-position : 5px 6px } 

这里定义对象div,背景图片为,并且背景图片不重复,定位于div对象靠左距离5px,靠上距离6px

四、DIV CSS背景居中   -  
网站免责声明 本网站所提供的信息,只供参考之用。 本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误对用户或任何其他人士负任何直接或间接的责任。 本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接或项目所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿(包括但不限于收益、预期利润的损失或失去的业务、未实现预期的节省)。 本网站所提供的信息,若在任何司法管辖地区供任何人士使用或分发给任何人士时会违反该司法管辖地区的法律或条例的规定或会导致本网站或其第三方代理人受限于该司法管辖地区内的任何监管规定时,则该等信息不宜在该司法管辖地区供该等任何人士使用或分发给该等任何人士。用户须自行保证不会受限于任何限制或禁止用户使用或分发本网站所提供信息的当地的规定。 本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。 凡以任何方式登陆本网站或直接、间接使用本网站资料者,视为自愿接受本网站声明的约束。联系QQ515827934