CSS3对background的调整和增加的属性

CSS3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。

  1、多个背景图片

  在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:

  background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

  2、新属性:Background Clip

  此讨论让我们回到文章开始提到的关于背景被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、新属性: Background Origin

  此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似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、新属性:Background  Size

  Background Size属性用来重设你的背景图片。有几个属性值:
  (1)background-size: contain;
  缩小背景图片使其适应标签元素(主要是像素方面的比率)
  (2)background-size: cover;
  让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
  (3)background-size: 100px 100px;
  标明背景图片缩放的尺寸大小
  (4)background-size: 50% 100%;
  百分比是根据内容标签元素大小,来缩放图片的尺寸大小

  你可以去CSS 3 specifications站点看一下简单的案例说明。

  5、新属性:Background Break

  css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。
  属性值:

  (1)Background-break: continuous;
  此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)
  (2)Background-break: bounding-box;
  重新考虑区域之间的间隔
  (3)Background-break: each-box;
  对每一个独立的标签区域进行背景的重新划分。

  6、背景颜色的调整

  background-color属性在css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用的标签元素背景图片进行去色处理。

  background-color: green / blue;此例子里,这背景颜色可能是绿色,然而,如果底部背景图片无效的话,蓝色将代替绿色来显示。如果你没有指定某个颜色的话,它将其视为透明。

  7、背景重复的调整

  css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。
  space:图片以相同的间距平铺且填充整个标签元素
  round:图片自动缩放直到适应且填充整个标签元素

  CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

  8、Background Attachment 的调整

  Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条滚动的。现在,有了background-attachment:local,就可以做到让背景随元素内容滚动而滚动了。

时间: 2024-10-28 03:40:40

CSS3对background的调整和增加的属性的相关文章

css3教程:background属性调整增强

网页制作Webjx文章简介:css3.0对background的调整与增强. (注:仅对css3对background的调整.增加的属性进行了翻译)css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显

css3对background属性调整与增强

css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下: background-image: url(top-image.jpg), url(middle-image.jpg), url(bo

CSS3中background

在CSS3你可以指定背景图片的大小(background-size).这是在以前CSS里想都不敢想的问题,现在使用CSS3可以用像素或者用百分比来指定背景图片的大小.背景的尺寸是相对于你设定过background-origin的值相对应区域的长和宽 其语法为:background-size:[ auto ]{1,2} cover contain,length:由浮点数字和单位标识符组成的长度值.不可为负值.percentage:取值为0%到100%之间的值.不可为负值.还可以通过cover和co

CSS3的简单又实用的3个属性

这篇文章介绍了 5 个实用的 CSS 属性.你应该很熟悉,但很可能很少会使用到.我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CSS2 中的属性,如:clip,min-height,white-space,curosr 和 display 等一些被所有浏览器广泛支持的属性.因此,千万不要错过这篇文章,因为你可能发现它们竟有如此之大的用途. 1.CSS Clip 剪辑 (clip) 属性就像一个面具.它允许你使用矩形掩盖页面元素的内容.要剪辑一个元素:你必须指定其 position 属性

jquery动态移除/增加onclick属性详解

要实现效果:点击链接先去掉onclick属性,3秒后再自动加上该标签中的onclick属性 jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的onclick属性,对应的: 增加事件  $(选择器).attr(属性名) 它的作用就是获取指定元素( $(选择器)部分 )的指定属性的值 如 设置onclick属性:$("a").attr("onclick&quo

陌陌“时刻”增加时间属性 视频社交更立体全景

为了迎合更多年轻人的喜好,移动社交平台陌陌在近日发布的7.1新版中,支持用户拍摄时刻时添加变脸特效,同时可以查看到附近用户发布的时刻. 陌陌8月中旬上线的时刻功能得到了很多年轻陌陌用户的认可,用户可以通过时刻拍摄一条时长不超过10秒的短视频,并在拍摄好的视频上添加文字.趣味贴纸及手绘涂鸦.好友可以对"时刻"打赏虚拟礼物,或直接发送消息进行交流.很多用户表示,通过时刻感觉和好友之间的距离拉近了,没事互相送一些虚拟礼物,彼此交流的次数也多了. 在7.1版陌陌中,对于时刻的拍摄增加了动态捕捉

美柚助手工具增加社区属性 用户突破2000万

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   12月2日消息,美柚女生助手宣布,截至2013年11月底,其激活用户已突破2000万. 发展初期,美柚曾定位于基于大数据与云计算设计的个性化女生助手类应用.在今年9月,美柚增加了社区功能"她她圈",即根据用户需求设置了26个时下具备广泛讨论性的女性话题圈. 美柚品牌总监王丹丹表示,"该功能的引入,不仅加快了用户增长速度,并且增加了用

为ASP.NET 2.0菜单控件增加target属性

ASP.NET 2.0 里的菜单控件加上 sitemap 文件为网站导航提供了很简单的实 现方法,但有个令人烦恼的事不能控制菜单打开的窗口,经常有需要弹出新窗口 的菜单就比较难处理.其实有个很简单的方法. 首先在sitemap文件添加自己定义属性,这里我们用 target <siteMapNode title="首页" description="" target="_blank" url="~/Default.aspx"

Wordpress 链接的XFN关系增加nofollow属性

今天查询站点的友链情况的时候发现"我的推荐"栏目下的链接并没有加上nofollow属性,该栏目主要存放的是一些有价值的博客,属于tiandi发起的单向友链,所以可以加上nofollow属性以免蜘蛛爬行出去. 我们来看下默认的链接关系是没有办法直接输入内容的,只能通过下面的选项来选择,但是所有的选项都没有nofollow属性,所以我们需要小小的修改一下,使得这里可以选择nofollow项目. 修改方法也很简单,xfn是在/wp-admin/meta-box.php里定义的.打开该文件,在