仓酷云

标题: 来谈谈：css3教程:background属性调剂加强 [打印本页]

作者: 逍遥一派 时间: 2015-1-15 23:16
标题: 来谈谈：css3教程:background属性调剂加强
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
破洛洛文章简介：css3.0对background的调剂与加强.
（注：仅对css3对background的调剂、增添的属性举行了翻译）
css3关于backgrounds做了一些修正，最分明的一个就是接纳设置多背景，不仅增加了4个新属性，而且还对今朝的属性举行了调剂加强。
1、多个背景图片
在css3内里，你能够再一个标签元素里使用多个背景图片。代码相似与css2.0版本的写法，但援用图片之间需用“，”逗号离隔。第一个图片是定位在元素最下面的背景，前面的背景图片顺次在它上面显现，以下：
background-image:url(top-image.jpg),url(middle-image.jpg),url(bottom-image.jpg);
2、新属性：BackgroundClip
此会商让我们回到文章入手下手提到的关于背景被border边框遮挡的成绩。background-clip的增加让我们完整可以把持背景显现的地位。属性值以下：
(1)background-clip:border;背景在border边框下入手下手显现
(2)background-clip:padding;背景在padding下入手下手显现，而不是border边框下入手下手
(3)background-clip:content;背景在内容地区下入手下手显现，而不是border边框下入手下手或padding下入手下手。
(4)background-clip:no-clip;默许属性值，相似与background-clip:border;
3、新属性:BackgroundOrigin
此属性必要与background-position共同利用。你能够用background-position盘算定位是从border，padding或contentboxes内容地区算起。（相似background-clip）
(1)background-origin：border;
从border边框地位算起
(2)background-origin：padding;
从padding地位算起
(3)background-origin：content;
从content-box内容地区地位算起；
background-clip和background-origin的分歧的地方www.CSS3.info网站给做了很好的剖析解说。
4、新属性：BackgroundSize
BackgroundSize属性用来重设你的背景图片。有几个属性值：
(1)background-size:contain;
减少背景图片使其顺应标签元素（次要是像素方面的比率）
(2)background-size:cover;
让背景图片缩小延长到全部标签元素巨细（次要是像素方面的比率）
(3)background-size:100px100px;
标明背景图片缩放的尺寸巨细
(4)background-size:50%100%;
百分比是依据内容标签元素巨细，来缩放图片的尺寸巨细
你能够往CSS3specifications站点看一下复杂的案例申明。
5、新属性：BackgroundBreak
css3里标签元素能被分在分歧地区（如：让内联元素span跨多行），background-break属功能够把持背景在分歧地区显现。
属性值：
(1)Background-break:continuous;
此属性是默许值，无视地区之间的距离清闲（给它们使用图片就仿佛把它们当作一个地区一样）
(2)Background-break:bounding-box;
从头思索地区之间的距离
(3)Background-break:each-box;
对每个自力的标签地区举行背景的从头分别。
6、背景色彩的调剂
background-color属性在css3版本内里略微做了加强，除指定backgroundcolor背景色彩以外，还能够对不利用的标签元素背景图片举行往色处置。
background-color:green/blue;此例子里，这背景色彩多是绿色，但是，假如底部背景图片有效的话，蓝色将取代绿色来显现。假如你没有指定某个色彩的话，它将其视为通明。
7、背景反复的调剂
css2里当设置背景的时分，它常常被标签元素截取而显现不全，css3先容了2个新属性来修复此成绩。
space：图片以不异的间距平展且添补全部标签元素
round：图片主动缩放直到顺应且添补全部标签元素
CSS3specifications网站对background-repeat:space的利用就是一个现成的例子。
8、BackgroundAttachment的调剂
BackgroundAttachment有了一个新属性值:local,当标签元素转动时它才无效(如设置overflow:scroll;)，当background-attachment设置为scroll时，背景图片是不随内容滚条转动的。如今，有了background-attachment:local，就能够做到让背景随元素内容转动而转动了。
中文原文：css3.0对background的调剂与加强
英文原文：BackgroundsinCSS3

</p>
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

作者: 山那边是海 时间: 2015-1-17 21:17
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 简单生活 时间: 2015-1-26 22:27
可以使用 CSS 检查工具进行设计。

作者: 变相怪杰 时间: 2015-2-5 04:54
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 灵魂腐蚀 时间: 2015-2-11 06:42
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 逍遥一派 时间: 2015-3-2 00:12
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: admin 时间: 2015-3-11 03:30
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 老尸 时间: 2015-3-17 20:10
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 透明 时间: 2015-3-25 02:46
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

欢迎光临仓酷云 (http://www.ckuyun.com/)