用css控制背景图片

sunny — Sun, 07 Sep 2008 12:15:16 +0000

css中用background-image属性给元素的背景添加了图片。例如要把图片作为网页背景可以给body标签创建一个样式：

CSS语言:

body
{
background-image:url(images/bg.gif);
}

其中url中的值可以用引号引住也可以不用。

关于背景图片的重复可以用如下属性来控制：background-repeat，属性值有：

no-repeat：不重复，只显示图片一次。用于设计网站的logo。
repeat-x：在x轴上平铺。可以用来设置图片横幅。
repeat-y：在y轴上平铺，可以用它来添加一个工具条。

定位背景图片可以用如下属性：background-position：center center、center top、center bottom、top right、bottom right、left top 、left bottom等等，也可以用精确的值来定位例如background-position：5px 8px，属性值也可以是百分比。

背景图片的固定用如下属性：background-attachment：scroll/fixed 。前者的意思是背景图片随着网页的内容一起滚动，后者的意思是把图片保留在背景中的固定位置上如logo。

当然你为了空值背景图片没有必要一遍一遍的详细输入各个属性，一个简单的做法是：

background：#FFF url（../image/logo.gif）fixed center center no-repeat;

给无序列表使用图片–以往无需列表的项目符号是一个黑点。如果想要用图片代替那么首先你要隐藏正常显示在列表项目旁边的项目符号。像这样：

.sidebar li
{
list-style:none;
}

现在就可以添加图片做项目符号了：

background-image:url(images/flower.gif);
background-repeat:no-repeat;

添加完毕以后，你就可以看到新的项目符号了。可能会有一些错位，比如项目符号与文字重叠或者项目符号偏上/下等等这些在稍微调试一下即可。

background-position:0px 2px;//将项目符号下移
padding-left:18px;//将内容与项目符号间的空间增大，来显示图片
margin-bottom:6px;//将两个无序列表之间留点空隙

给工具条添加一个圆角的背景图片（该图片高度并不是很高）：

注意事项：

工具条此时不要用border属性，否则显示不出圆角。
为了是工具条的内容与背景中底边的花朵不重叠可以设置：padding-bottom：75px来加大距离。
要是工具条的宽度与背景图片的宽度相同，不要padding-left、padding-right属性。
要设置图片的位置为center bottom这样才能保证工具条的下方是圆角。

相信明天会更好 » 布局

用css控制背景图片