background

css2 中有五个与背景相关的属性。

它们是:

  • background-color: 完全填充背景的颜色
  • background-image: 用作背景的图片
  • background-position: 确定背景图片的位置
  • background-repeat: 确定背景图片是否重复铺平
  • background-attachment: 确定背景图片是否随页面滚动

background-color 也能设置成 transparent,这样就能让其下的元素显示出来。

background-image 让你可以使用自己的图片作为背景。一旦你的图片不足以平铺整个元素背景,空出的部分将显示 background-color 设置的颜色。

background-repeat 默认情况下你的图片会水平和垂直重复直至铺满整个元素。但有时你可能只想向一个方向重复。那么就这么设置:

background-repeat:repeat;

background-repeat: no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-repeat:inherit;

background-position 属性控制着背景图片在元素中的位置。掌握的关键是 background-position 是图片的左上角定位。当然我们要把 background-repeat 属性设置为 no-repeat。

background-position: 0 0;
 
background-position:75px 0;
 
background-position:-75px 0;
 
background-position:0 100px;

background-position 属性也可以以关键字,百分比等单位工作,并非一定要精确使用像素(px)。
关键字很常用,在水平方向有:
left
center
right
垂直方向有:

top
center
bottom
就像之前那样使用它们:

background-position: top right;

百分比的使用方法也一样:

background-position: 100% 50%;

background-attachment 属性定义用户滚动页面时背景图片会发生什么。

它有三个可能值:scroll, fixed and inherit。 Inherit 仍然是继承其父元素的设定。要充分理解 background-attachment 属性,首先就得搞清用户滚动页面时,web 页面发生了什么。如果你设置值为 fixed,那么当你向下滚动页面时,内容向下滚动了,而背景不会跟着滚动。结果就好像内容向上在滚动。当然,如果你设值为 scroll,背景就会滚动了。

简单的 Background 属性

我们可以把这些属性设定写在一个属性内。它的格式如下:

background:<color><image><position><attachment><repeat>

而且你无需设定每个值。如果你不写,就会使用默认值。

CSS3 中有不少关于背景属性的变化。最明显的就是加入了多背景图片的支持,另外还有四个新属性,以及对已有属性的改动。

为一个元素使用多于一张的背景图片。代码与 CSS2 中相同,你可以用逗号分隔开几张图片。第一个声明的图片会出现在元素顶部,就像这样:

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

新属性1: Background Clip
这个属性又让我们回到了开始的问题,关于 border 与 background 属性的问题。

background-clip 属性让你能控制在哪显示你的背景.可能的值有:

background-clip: border-box;
background 在 border 内显示,和现在的方式一样。

background-clip: padding-box;
background 在 padding 内显示,而非 border,跟 IE6 的处理方式相同。

background-clip: content-box;
backgrounds 只显示在内容内,而非 border 或 padding。

background-clip: no-clip;
默认值,和 border-box 一样。

新属性2: Background Origin

这个属性需要和 background-position 属性一起使用。你可以改变 background-position 的计算方式(就像 background-clip 一样).

background-origin: border-box;
background-position从border开始计算。

background-origin: padding-box;
background-position从padding开始计算。

background-origin: content-box;
background-position从内容开始计算。

新属性3: Background Size
background-size 属性用来重定义你的背景图片大小。其可能值有:

background-size: contain;
缩小图片以符合元素大小。

background-size: cover;
扩展图片以符合元素大小。

background-size: 100px 100px;
重定义大小。

background-size: 50% 100%;
用百分比重定义。

新属性4: Background Break
CSS 3 中, 元素能分拆成多个部分(例如 inline 元素 span 能占多个行)。

background-break 属性控制背景图像如何在多个部分展示。

可能值有:

Background-break: continuous; 默认值

Background-break: bounding-box; 将两部分之间的值加入考虑。

Background-break: each-box; 每个部分单独考虑。

BackgroundColor 属性的改变

CSS3 中 background-color 属性支持前景色与底色:background-color: green/blue;

BackgroundRepeat 属性的改变
还记得 CSS2 中图片可能会因过界而部分消失吗? CSS3 有两个新可能值来解决这一问题:

space: 设置重复图片的间距。

round: 重复图片自动调整大小以正好填充元素。

Background Attachment属性的改变

background-attachment有个新可能值:

local:它与可滚动的元素相关(比如拥有属性overflow: scroll;)。当background-attachment值为scroll时,背景图片不会随内容滚动。现在有background-attachment:local,图片可以随内容一起滚动。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各...
    张歆琳阅读 9,782评论 4 26
  • 1. 定义和用法 background是一个简写属性,可以在一个声明中设置所有的背景属性,可设置的属性如下: 这些...
    lightNate阅读 9,889评论 2 9
  • 取值 background-color 背景颜色 background-image 背景图像 backgr...
    EJRoxy阅读 3,550评论 0 0
  • CSS3对background新加了3个属性,background-origin、background-clip、...
    彬_仔阅读 5,400评论 0 9
  • 他咬的齿痕是红色的,或许一直是红色的 直到我轻轻的戴上红盖头,被扶入花轿 轿夫唱起高坡上悲怆的调,我闭上眼睛 他咬...
    唐啵儿阅读 1,531评论 0 3

友情链接更多精彩内容