首页 > 代码库 > CSS 背景

CSS 背景

CSS 背景 

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body,h1,p,div的选择器中:

body {background-color:#b0c4de;} 
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

CSS中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:"rgb(255,0,0)"
  • 颜色名称 - 如:"red"

背景图像

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

页面背景图片设置实例:

body {background-image:url(paper.gif);} 

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示: 

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body
{
background-image:url(gradient2.png);
background-repeat:repeat-x;
} 

背景图像- 设置定位与不平铺

技术分享 让背景图像不影响文本的排版

如果你不想让图像平铺,你可以使用 background-repeat 属性:

body
{
background-image:url(img_tree.png);
background-repeat:no-repeat;
} 

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url(img_tree.png);
background-repeat:no-repeat;
background-position:right top;
} 

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

当使用简写属性时,属性值的顺序为::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
body
{ 
    background: #00ff00 url(smiley.gif) no-repeat fixed center; 
}

 

CSS background-attachment 属性

body
{ 
background-attachment:fixed;
} 

属性值

说明
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承

 

background-size 属性

div
{
background-size:80px 60px;//第一个值设置宽度,第二个值设置的高度  length
 background-size:100% 100% // percent
}
length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"atuo(自动)"
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

拉伸背景图像 http://www.runoob.com/try/try.php?filename=trycss3_background-size2

四个背景图像图像横向拉伸http://www.runoob.com/try/try.php?filename=trycss3_background-size3

 

CSS background-repeat 属性

repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承

 

CSS3 background-origin 属性

暂未搞懂

 

CSS 背景