曲径通幽论坛

标题: 背景属性 [打印本页]

作者: beyes 时间: 2015-12-24 23:15
标题: 背景属性
background-color
定义元素的背景色，比如下面代码所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
div {
background-color: #CB999A;
}
</style>
</head>
<body>
<div>
<h1>曲径通幽技术论坛</h1>
</div>
</body>
</html>

复制代码

效果图：
[attach]4256[/attach]

background-image
定义背景图像，使用格式： background-image:url(your_image) ;

许多情况下，还需要配合 background-repeat:repeat-x; 这样的标签使用，以使图像得到延伸。通常我们不会针对一个区域的尺寸去做一个和其大小一样的图像，这么搞会把整个页面弄得很大，在人流量大时，会占用许多带宽。使用 repeat-x 这种做法，目的是减小页面对图像的加载量，此时图像只要做得很小即可，系统会自动为你延伸你的背景图。需要注意的是，如果想看到的效果是“无缝”延伸的，那么该张背景图一般都是单色的，或者是透明的。

另外需要提到一个问题，如果你的背景图的尺寸大于所在的 div ，则图则会委屈自己的尺寸以适应 div 的尺寸，而不会撑到 div 的外面来。

示例代码：

<style type="text/css">
div {
background-image: url(bg.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div>
<h1>曲径通幽技术论坛</h1>
</div>
</body>

复制代码

效果图：
[attach]4257[/attach]

还有个问题，如果同时定义了背景颜色和背景图像，那么优先使用的是背景图像。

background-position

背景位置。这里假设有一个 LOGO 图片，我们可以通过该属性调整其位置。比如下面这段 CSS 代码：

<style type="text/css"> div {
background-color:#3ED386;
background-image: url(bbs-logo.png);
background-repeat:no-repeat;
background-position:center bottom;
}

复制代码

它的意思是，该背景颜色为绿色，其上有一个名为 bbs-logo.png 的背景图，要求不重复(no-repeat)扩展（否则将布满整个 div 区），且通过 background-postion 指定了它的位置在 div 的底部居中位置；当然这个位置也可以通过具体的数值来指出。效果如下图所示：
[attach]4258[/attach]

background-attachment

固定或滚动背景。当其值为 fixed 时，背景图像不会被移动。比如，你的背景图像（假设是一个小LOGO）放在页面的左上角，且该值为 fixed 时，当你下拉滚动条时，你会始终在页面的左上角看到该 LOGO，似乎它就是固定在那里的。如果该值为 scroll 时，当你向下拉动滚动条时，该 LOGO 从你的视线消失。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)