设计师必须了解的几个css background属性.docVIP

下载本文档

3
0
约6.25千字
约 8页
2017-08-14 发布于河南
举报
版权申诉

设计师必须了解的几个css background属性.doc

1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
7、VIP文档为合作方或网友上传，每下载1次，网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

本文将介绍几个background属性，这些属性即有CSS2中的，也有部分是可能出现在未来的CSS3中。相信掌握了这些background属性，对大家今后的开发工作十分有帮助。背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性，甚至包括 background-attachment，还为我们介绍了它在即将到来的CSS3中的样子，还有那些新加入的背景属性。使用CSS2中的背景属性回顾CSS2中有五个与背景相关的属性。它们是：background-color: 完全填充背景的颜色? ?? ?? ?? ?? ?? ? background-image: 用作背景的图片? ?? ?? ?? ?? ?? ?? ?? ???background-position: 确定背景图片的位置? ?? ?? ?? ?? ? background-repeat: 确定背景图片是否重复铺平? ?? ?? ???background-attachment: 确定背景图片是否随页面滚动??这些属性能够写在一个简单的属性中：background。必须指出background负责元素内容部分的背景，包括padding和 border，但不包括margin。在Firefox, Safari 和 Opera, 以及 IE8中是这样处理的。不过在IE7 和万恶的IE6中就没包括border，区别就像下面的图片示例显示的那样。在IE7 和 IE6中Background没有包括border 在IE7 和 IE6中Background没有包括border基本属性Background color属性background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色，下列方法都是等效的：? ?1. background-color: blue;??? ?2. background-color: rgb(0, 0, 255); ? ?3. background-color: #0000ff;background-color 也能设置成transparent，这样就能让其下的元素显示出来。Background image属性background-image 让你可以使用自己的图片作为背景。它和background-color关系密切。一旦你的图片不足以平铺整个元素背景，空出的部分将显示 background-color设置的颜色。它的使用极其简单，不过要记得图片与css文件的位置关系：background-image: url(image.jpg);如果图片在文件夹内，就写成这样，均是用得相对路径:background-image: url(images/image.jpg);Background repeat属性默认情况下你的图片会水平和垂直重复直至铺满整个元素。但有时你可能只想向一个方向重复。那么就这么设置：? ?1. background-repeat: repeat;? ?? ?2. background-repeat: no-repeat;? ?3. background-repeat: repeat-x;? ?4. background-repeat: repeat-y;? ?5. background-repeat: inherit;Background position属性background-position属性控制着背景图片在元素中的位置。掌握的关键是background-position 是图片的左上角定位。下面是background-position属性的演示。当然我们把background-repeat 属性设置为 no-repeat。? ?1.? ?? ?2. background-position: 0 0;? ?3.? ?? ?4.? ?5. background-position: 75px 0; ? ?6.? ?? ?7.? ?8. background-position: -75px 0; ? ?9.? ???10.??11. background-position: 0 100px;随意设置背景图片的位置你可以随意设置背景图片的位置background-position 属性也可以以关键字，百分比等单位工作，并非一定要精确使用像素（px）。关键字很常用，在水平方向有:leftcenterright垂直方向有:topcenterbottom就像之前那样使用它们: