首页 > 代码库 > 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 背景