仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 882|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:css3教程:background属性调剂加强

[复制链接]
逍遥一派 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:16:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是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:52 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
简单生活 该用户已被删除
板凳
发表于 2015-1-26 22:27:23 | 只看该作者
可以使用 CSS 检查工具进行设计。
变相怪杰 该用户已被删除
地板
发表于 2015-2-5 04:54:45 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
灵魂腐蚀 该用户已被删除
5#
发表于 2015-2-11 06:42:52 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
逍遥一派 该用户已被删除
6#
 楼主| 发表于 2015-3-2 00:12:58 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
admin 该用户已被删除
7#
发表于 2015-3-11 03:30:55 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
老尸 该用户已被删除
8#
发表于 2015-3-17 20:10:40 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
透明 该用户已被删除
9#
发表于 2015-3-25 02:46:11 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 07:25

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表